troubleshooting Question

Cascading drop down lists AJAX/PHP/MySql not working correctly on IE

Avatar of Emilie
Emilie asked on
PHPWeb BrowsersAJAX
3 Comments1 Solution1235 ViewsLast Modified:
I am still having trouble generating cascading drop down list with AJAX/PHP when using Explorer.  It works fine the first time around.  The province gets generated.  It also removes the province correctly when I deselect the country.  The problem is that it only works once.  If I reselect the country a second time, the province does not get added this time.

The code below is exactly the code implemented at budtour.com/test.php.

The problem is only with Internet Explorer.  It works fine with other browsers (Firefox, Safari, Opera, Chrome).

Any ideas?
<?php


include 'db/dbOpen.php';


if (strlen($country) > 1) {
	$searchQuery = "SELECT Hall, City, State, Country, Tour, Time, Format, Open, Tid
		FROM `tournament` t, `poolhall` p
		WHERE t.Username = p.Username
		AND Country = '$country'";
		if (strlen($state) > 1) {
			$searchQuery .= " AND State = '$state'";
		}
		$searchQuery .= ";";
	
	$getSearch = mysql_query($searchQuery);
}


$countryQuery = "SELECT Country
	FROM `poolhall`
	GROUP BY Country;";
	
$getCountry = mysql_query($countryQuery);

include 'db/dbClose.php';

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="description" CONTENT="Pool & Billiard tournament organizer - Web publishing - Scheduling -Calcutta manager.  This fully automated package puts together all the pieces involved in producing such event, hopefully turning out tons of new competition at your local pool halls.">

<meta NAME="keywords" CONTENT="IngenPool, billiard tournament software, tournament software, billiard tournament manager, tournament organizer , tournament chart , pool manager, 8 ball , 9 ball , 14.1, tournament scheduler , billiard tournament , pool tournament">

<meta name="revisit-after" content="4days">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

		

<script language="javascript" type="text/javascript">
<!--
	//AJAX communication with server
	function getHTTPObject(){
	   if (window.ActiveXObject) 
		   return new ActiveXObject("Microsoft.XMLHTTP");
	   else if (window.XMLHttpRequest) 
		   return new XMLHttpRequest();
	   else {
		  alert("Your browser does not support AJAX.");
		  return null;
	   }
	   
	}
	
	function remove(combo) {
		var x = document.getElementById(combo).options.length;
		for (var i=1; i< x; i++) {
			document.getElementById(combo).remove(1);
		}
	}
	
	
	// sends info to server when combo box changes
	function updateState(){    
alert("updateState triggered");
		httpObject = getHTTPObject();
		if (httpObject != null ) {
			httpObject.open("GET", "comboGeneration/state.php?Country="
				+document.getElementById('countryCombo').value, true);
			httpObject.send(null); 
			httpObject.onreadystatechange = setOutputState;
		}
	}
	
	
	// gets data from state.php
	function setOutputState(){

		if(httpObject.readyState == 4){
			var selectBox = document.getElementById('stateCombo');
		
			result = httpObject.responseText;
			arrayResult = result.split("*");	
			
			remove('stateCombo');
alert("setOutputState triggered");			
			if (document.getElementById('countryCombo').value != "0") {
			
				for (var i=0; i<arrayResult.length; i++) {
					if (arrayResult[i].length > 1) {
						var str = arrayResult[i].replace(/^\s+|\s+$/g,"");
						var newOption = document.createElement('option');
						newOption.text = str;
						newOption.value = str;
						
						try {
							selectBox.add(newOption, null); // standards compliant; doesn't work in IE
						}
						catch(ex) {
							selectBox.add(newOption); // IE only
						}
					}
				}
			}
		}
	}
	
	
	
//-->
</script>

<title>Budtour Tournament</title>
</head>

<body>

<form method="post" action="test.php">
 <select name="country" id="countryCombo" onchange="updateState();">
 	<option value="0">--Country--</option>
    
    <?php
	while ($data=mysql_fetch_array($getCountry)) {
		echo "<option value=\"" . $data['Country'] . "\">";
		echo $data['Country'];
		echo "</option>\n";
	}
	?>
 </select>
  <select name="state" id="stateCombo" >
 	<option value="0">--State--</option>
       
 </select>

 
 <input type="submit" value="Search" />
 
 </form>
 </body>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros