• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 550
  • Last Modified:

dynamic combo box implementation problem in IE

The code below dynamically generates the content of combo boxes based on the the selected item of the previous combo box.  The problem is that the options do not get added when I run it in Internet Explorer.  It works in every other browser I've tried (Firefox, Safari, Opera).  

As far as I can tell  httpObject.responseText does not store anything into the result variable when run on IE.

I really need help here!

The code below can be viewed at www.budtour.com/test.php
<?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'";
			if (strlen($city) > 1) {
				$searchQuery .= " AND City = '$city'";
				if (strlen($hall) > 1) {
					$searchQuery .= " AND Hall = '$hall'
					";
				}
			}
		}
		$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">

<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(){    
		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){
			result = httpObject.responseText;
			arrayResult = result.split("*");	
			
			remove('stateCombo');
			remove('cityCombo');
			remove('hallCombo');
			
			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;
					var selectBox = document.getElementById('stateCombo');
					
					try {
						selectBox.add(newOption, null); // standards compliant; doesn't work in IE
					}
					catch(ex) {
						selectBox.add(newOption); // IE only
					}
				}
			}
		}
	}
	
	
	function updateCity(){    
		httpObject = getHTTPObject();
		if (httpObject != null) {
			
			httpObject.open("GET", "comboGeneration/city.php?Country="
				+ document.getElementById('countryCombo').value
				+ "&State=" + document.getElementById('stateCombo').value, true);

			httpObject.send(null); 
			httpObject.onreadystatechange = setOutputCity;
			
		}
	}
	
	
	// gets data from city.php
	function setOutputCity(){
		if(httpObject.readyState == 4){
			result = httpObject.responseText;
			arrayResult = result.split("*");	
			
			remove('cityCombo');
			remove('hallCombo');			
			
			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;
					var selectBox = document.getElementById('cityCombo');
					
					try {
						selectBox.add(newOption, null); // standards compliant; doesn't work in IE
					}
					catch(ex) {
						selectBox.add(newOption); // IE only
					}
				}
			}
		}
	}
	
	function updateHall(){    
		httpObject = getHTTPObject();
		if (httpObject != null) {
			httpObject.open("GET", "comboGeneration/hall.php?Country="
				+ document.getElementById('countryCombo').value
				+ "&State="
				+ document.getElementById('stateCombo').value
				+ "&City="
				+ document.getElementById('cityCombo').value, true);
			httpObject.send(null); 
			httpObject.onreadystatechange = setOutputHall;
			
		}
	}
	
	
	// gets data from city.php
	function setOutputHall(){
		if(httpObject.readyState == 4){
			result = httpObject.responseText;
			arrayResult = result.split("*");
			
			remove('hallCombo');				
			
			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;
					var selectBox = document.getElementById('hallCombo');
					
					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>";
		echo $data['Country'];
		echo "</option>\n";
	}
	?>
 </select>
  <select name="state" id="stateCombo" onchange="updateCity();" >
 	<option value="0">--State--</option>
       
 </select>
  <select name="city" id="cityCombo" onchange="updateHall();" >
 	<option value="0">--City--</option>
  </select>
 
 <select name="hall" id="hallCombo" >
 	<option value="0">--Hall--</option>
 </select>
 
 <input type="submit" value="Search" />
 
 </form>
 </body>

Open in new window

0
Emilie
Asked:
Emilie
  • 4
  • 2
1 Solution
 
kadabaCommented:
replace the query like this

<?php
        while ($data=mysql_fetch_array($getCountry)) {
                echo "<option value='".$data['Country']."'>";
                echo $data['Country'];
                echo "</option>\n";
        }
?>
0
 
kadabaCommented:
or
make a change in the script this way...

the state combo which is populated is not being populated with value i.e
<option>canada</option> instead of
<option value="canada">canada</option>
So when you retrieve value IE does not see a value present.

Let me know


function updateCity(){    
                httpObject = getHTTPObject();
                if (httpObject != null) {
                        
                        httpObject.open("GET", "comboGeneration/city.php?Country="
                                + document.getElementById('countryCombo').value
                                + "&State=" + document.getElementById('stateCombo').options[document.getElementById('stateCombo').selectedIndex].text, true);

                        httpObject.send(null); 
                        httpObject.onreadystatechange = setOutputCity;
                        
                }
        }

Open in new window

0
 
EmilieAuthor Commented:
As far as I can see, the problem is higher up in the code.  I added a few alert calls and found out that on line 78, the variable result does not get the value return by the php file comboGeneration/state.php, yet the file, if loaded on its own, returns the right value.  
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
kadabaCommented:
did you consider my changes?

alert(document.getElementById('countryCombo').value); have this in the updateState and test. what do you get?

its because you are sending a blank value in the request, the response is coming blank

ok fine let me prove it to you.

Test this in both browsers and see for yourself

<html>
<head>
<script type="text/javascript">
	function getValue(selObj)
	{
		alert(selObj.value);	
	}
</script>
</head>
<body>
	your sample:
	<select id="test" onchange="getValue(this);">
		<option value="0">--select country--</option>
		<option>canada</option>
		<option>US Of A</option>
	</select>
    recomended sample:
	<select id="test1" onchange="getValue(this);">
		<option value="0">--select country--</option>
		<option value="canada">canada</option>
		<option value="US of A">US Of A</option>
	</select>
</body>
</html>

Open in new window

0
 
EmilieAuthor Commented:
That was exactly what the problem was!  Can't believe I didn't see it.  Thank you!  Sorry I didn't understand what you meant at first.  I thought you were referring to the javascript that was creating the additional options.
0
 
kadabaCommented:
:)

Sorry perhaps I did not explain myself in a better way.

Now that you have it sorted out, thanks for the points.

Have a wonderful day ahead.
0
 
manjunathubCommented:
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now