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

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>

Open in new window

EmilieAsked:
Who is Participating?
 
Beverley PortlockCommented:
There are a range of MS XMLHTTP objects. Here is some code I have pinched from ModernMethod's Sajax code

               var A;

               var msxmlhttp = new Array(
                    'Msxml2.XMLHTTP.5.0',
                    'Msxml2.XMLHTTP.4.0',
                    'Msxml2.XMLHTTP.3.0',
                    'Msxml2.XMLHTTP',
                    'Microsoft.XMLHTTP');
               for (var i = 0; i < msxmlhttp.length; i++) {
                    try {
                         A = new ActiveXObject(msxmlhttp[i]);
                    } catch (e) {
                         A = null;
                    }
               }

               if(!A && typeof XMLHttpRequest != "undefined")
                    A = new XMLHttpRequest();
               if (!A)
                    sajax_debug("Could not create connection object.");
               return A;

Maybe you can adapt this. Since it is only the IE code that is stuffed it is probably a case of selecting an object that works. My understanding is that different versions of IE use different versions

http://www.modernmethod.com/sajax/
0
 
kadabaCommented:
altered your code after the script statement...(though not necesary)

if the above mentioned does not work for you, I guess since you are not having the time stamp attribute IE might cache entries....

have the time stamp and check

<script language="javascript" type="text/javascript">
<!--
		function $(eleId){
			return document.getElementById(eleId);
		}
        //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 comboObj = $(combo);
                var x = comboObj.options.length;
				
                for (var i=1; i< x; i++) {
                        comboObj.remove(1);
                }
        }
        
        
        // sends info to server when combo box changes
        function updateState(selObj){    
                httpObject = getHTTPObject();
				if (httpObject != null ) {
					var url = "comboGeneration/state.php?Country="+selObj.value;
					url=url+"&sid="+Math.random();
					httpObject.open("GET",url, true);
					httpObject.onreadystatechange = setOutputState;
					httpObject.send(null); 
                }
        }
        
        
        // gets data from state.php
        function setOutputState(){
                if(httpObject.readyState == 4){
                        var selectBox = $('stateCombo');
                
                        result = httpObject.responseText;
                        arrayResult = result.split("*");        
                        
                        remove('stateCombo');
                        if ($('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(this);">
        <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>

Open in new window

0
 
EmilieAuthor Commented:
You were right, it had to do with the Msxml2.XMLHTTP.  I didn't use your exact code.  Instead, I only had to add Msxml2.XMLHTTP to my function getHTTPObject in the following way.

//AJAX communication with server
      function getHTTPObject(){
        var xmlhttp=false
            try{
                  xmlhttp=new XMLHttpRequest();//creates a new ajax object
            }
            catch(e)      {            
                  try{                  
                        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
                  }
                  catch(e){
                        try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
                        }
                        catch(e1){
                              xmlhttp=false;//error creating object
                        }
                  }
            }
                   
            return xmlhttp;
      }

Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.