Dynamic List not Working

[adamjblakey]

Hi,

 

I have a dynamic country and region list i am trying to get working but for some reason when i select a country the next region field does not populate.

 

Here is the code:

 

HTML

<select name="country" onchange="update(this.value)">
					<option value="184">USA</option>
                                                <option value="183">United Kingdom</option>
			</select>

			<select name="region" onchange="alert(this.value)">
				<option value="">Make a selection </option>
			</select>

 

 

Javascript

var AdminResponse = "";

function parseResponse(){

	var nText = AdminResponse.getElementsByTagName('optionText');
	var nVal = AdminResponse.getElementsByTagName('optionVal');
	document.forms[0]['region'].options.length = 1;
	for (i=0; i<nText.length; i++)
		{ 
		 var nOption = document.createElement('option'); 
		 var isText = document.createTextNode(nText[i].firstChild.data); 
		 nOption.setAttribute('value',nVal[i].firstChild.data); 
		 nOption.appendChild(isText); 
		 document.forms[0]['region'].appendChild(nOption); 
		}
}

function update(nVal){

	var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
	AdminRequest.onreadystatechange = function()
		{
	 	 if (AdminRequest.readyState == 4)
			{
	 	 	 if (AdminRequest.status == 200)
				{
		 	 	 AdminResponse = AdminRequest.responseXML;
		 	 	 parseResponse();
				}
	 	 	 else 	{
			 	 alert('Error Update.php File '+ AdminRequest.statusText);
				}
			}
		}
	var infoStr = "?choice="+nVal;
	AdminRequest.open("GET", "Update.php"+infoStr, true);
	AdminRequest.send(null); 
}

 

 

PHP

<?php 

$choice = $_GET['choice'];
$xml = "<?xml version='1.0' ?><options>";

require_once('init.php');

$query = "SELECT * FROM regions WHERE countryid = '$choice'";
$result = @mysql_query($query);
$num = @mysql_num_rows($result);
if ($result && $num > 0)
	{
 	 while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
		{
 	 	 $xml .= "<optionText>" . $row['region'] . "</optionText><optionVal>" . $row['region'] . "</optionVal>";
		}
	}
        $xml .= "</options>";
@mysql_free_result($result);
@mysql_close();	
header("Content-Type: text/xml");
echo $xml;

?>

 

 

SQL Structure

 

 

   

ID

   

countryid

   

Region

 

 

   

1

   

184

   

Brighton

 

 

   

2

   

184

   

Berkshire

 

 

   

3

   

184

   

Bath Avon

 

 

   

4

   

184

   

Bedfordshire

 

 

   

5

   

183

   

Alabama

 

 

   

6

   

183

   

Alaska

 

 

   

7

   

183

   

American Samoa

 

 

   

8

   

183

   

Arizona

 

 

Any help would be greatfully accepted.

 

Cheers,

Adam

[kratsg]

Let's start with the most error prone language: JavaScript. I'm kind of thinking you have the AJAX call formatted wrong for the browser, I used it on my chatroom and the chatroom stopped working xD Here's a function that I've used for a long time:

 

function request() {
var req = null;
if (typeof XMLHttpRequest != "undefined")
    req = new XMLHttpRequest();
if (!req && typeof ActiveXObject != "undefined")
{
    try
    {
        req=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e2)
        {
            try
            {
                req=new ActiveXObject("Msxml2.XMLHTTP.4.0");
            }
            catch (e3)
            {
                req=null;
            }
        }
    }
}
return req;
}

 

Here's an example of how I would implement it:

 

function refresh_chat() {

var message = document.getElementById("contents");

req3 = request();

if (req3==null){window.alert("Your browser does not support AJAX!");return;} 
req3.onreadystatechange=function(){
	if(req3.readyState == 4){//It ran so we can now determine if it resulted in an error or was a success :-)
		if(req3.responseText && req3.responseText != "clear"){message.value = req3.responseText+message.value;}
		if(req3.responseText && req3.responseText == "clear"){document.getElementById("message").disabled = true;document.getElementById("contents").disabled = true;document.getElementById("chat_reload").style.display = 'inline';setTimeout('location.reload(true)',1500);}
		if(req3.responseText != "clear"){setTimeout("refresh_chat()",1000);}
	}
}
    var url = 'chat_ref.php';
    //We are posting, not getting :-P


currtime = new Date().getTime();

    var params = "time="+currtime;
    req3.open("POST",url,true);

    //Send the proper header information along with the POST submission
    req3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req3.setRequestHeader("Content-length", params.length);
    req3.setRequestHeader("Connection", "close");

    //This is really the part that does the posting :-)
    req3.send(params);
}

 

Here's your code, updated with my function:

 

function request() {
var req = null;
if (typeof XMLHttpRequest != "undefined")
    req = new XMLHttpRequest();
if (!req && typeof ActiveXObject != "undefined")
{
    try
    {
        req=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e2)
        {
            try
            {
                req=new ActiveXObject("Msxml2.XMLHTTP.4.0");
            }
            catch (e3)
            {
                req=null;
            }
        }
    }
}
return req;
}

var AdminResponse = "";

function parseResponse(){

	var nText = AdminResponse.getElementsByTagName('optionText');
	var nVal = AdminResponse.getElementsByTagName('optionVal');
	document.forms[0]['region'].options.length = 1;
	for (i=0; i<nText.length; i++)
		{ 
		 var nOption = document.createElement('option'); 
		 var isText = document.createTextNode(nText[i].firstChild.data); 
		 nOption.setAttribute('value',nVal[i].firstChild.data); 
		 nOption.appendChild(isText); 
		 document.forms[0]['region'].appendChild(nOption); 
		}
}

function update(nVal){

	var AdminRequest = request();
	if (AdminRequest==null){window.alert("Your browser does not support AJAX!");return;} 
	AdminRequest.onreadystatechange = function()
		{
	 	 if (AdminRequest.readyState == 4)
			{
	 	 	 if (AdminRequest.responseText)
				{
		 	 	 AdminResponse = AdminRequest.responseText;
		 	 	 parseResponse();
				}
	 	 	 else 	{
			 	 alert('Error Update.php File '+ AdminRequest.statusText);
				}
			}
		}
	currtime = new Date().getTime();
	var infoStr = "?choice="+nVal+"&time="+currtime;
	AdminRequest.open("GET", "Update.php"+infoStr, true);
	AdminRequest.send(null); 
}

[adamjblakey]

Thank you very much for your reply. I have replaced my JS code with the code you have put but the still nothing happens when i select a country. Any ideas?

[adamjblakey]

I have just ran Firebug on the page when i select a country and it shows me the following error:

 

AdminResponse.getElementsByTagName is not a function

[break on this error] var nText = AdminResponse.getElementsByTagName('optionText');

 

Any Ideas?

[kratsg]

I have just ran Firebug on the page when i select a country and it shows me the following error:

 

AdminResponse.getElementsByTagName is not a function

[break on this error] var nText = AdminResponse.getElementsByTagName('optionText');

 

Any Ideas?

 

Doesn't really help me ehh... Here's what I'd like you to get... If you use FireBug, have it use an AJAX call, Copy and Paste the "Headers" and the "Response" that is displayed with the AJAX call. So I can see what you're sending to the server, and what the server is giving you.