Hello, I have been searching for a solution on how to solve this problem for almost a month now. I'm at a point where I feel like I've traveled around the world 7 times and still haven't found the answer.

I hate introductions so I'm just going to go ahead and break down the issue as detailed as I can explain it possible.

scenario: user selects a value from a drop down, and the next drop down will then be dynamically changed based on the value selected.

problem: ajax sends a request with parameters to a php script and the php script returns an html element(select with options). Problem is ajax retrieves empty results from the server therefore displaying the empty value/content.

The code works perfectly fine on Chrome/Firefox.. but IE (surprise surprise) is giving out errors.

I took airshow's advice and went ahead and posted the issue here. Thank you in advance for the help.

HTML:

<div class="inner">
<select name="select" id="year" size="1" onchange="showMake(this.value)">
<option>Select a Year</option>
<option>2002</option>
</select>
<br />
</p>
<p class="style1">&nbsp;</p>
<div id="make">
<p class="style1">
<select name="select2" size="1" id="select2">
<option>Make</option>
</select>
</p>
</div>
</div>

Javascript:

var xmlhttp;
var year;

function showMake(str){
	debugger;
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
  		alert ("Browser does not support HTTP Request");
  		return;
  	}
	year = str;
	var url="data.php";
	var vars = "year="+str;
	vars = vars +"&sid=" + new Date().getTime();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("POST",url, true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", vars.length);
    xmlhttp.setRequestHeader("Connection", "close");
	xmlhttp.send(vars);
}

function stateChanged(){
	if (xmlhttp.readyState==4){
		if(xmlhttp.status == 200){
	[INDENT]document.getElementById("make").innerHTML=xmlhttp.responseText;[/INDENT]
		}
	}
}

function GetXmlHttpObject(){
	if (window.XMLHttpRequest){
  	// code for IE7+, Firefox, Chrome, Opera, Safari
  	return new XMLHttpRequest();
  	}
	if (window.ActiveXObject){
  	// code for IE6, IE5
  	return new ActiveXObject("Microsoft.XMLHTTP");
  	}
	return null;
}

PHP:

<?php
$year = $_POST['year'];

$cnx = mysql_connect("url", "username", "password") or die(mysql_error());

mysql_select_db("db", $cnx);

if(strlen($year) > 0 && strlen($make) == 0){
	$sql = "SELECT Make FROM exoticars WHERE Year = '$year' GROUP BY Make";
	$result = mysql_query($sql);
	header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
	header("cache-Control: post-check=0, pre-check=0", false); 
	header("Pragma: no-cache"); 
	header("Expires: Mon, 27 Aug 2007 00:00 GMT");
	echo "<select name='select2' size='1' id='select2' ">";
	echo "<option>Make</option>";
	while($row = mysql_fetch_array($result)){
		echo "<option>" . $row[Make] . "</option>";   
	}
	echo "</select>";
}

muiBob,

I'm guessing that your php is fine because it works with FF etc.

There is a couple of things in the javascript/HTML that may be responsible for it not working in IE. I have given the code a throrough going over, resulting in this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>

<script>
// No global variables

function showMake(year){
	debugger;
	var xmlhttp = GetXmlHttpObject("Browser does not support HTTP Request");
	if(!year || !xmlhttp){ return; }// Additional safety
	var url = "data.php";
	var vars = [
		"year=" + year,
		"sid=" + new Date().getTime()
	].join('&');// This is a neat, economical way to compose a get/post string
	xmlhttp.onreadystatechange = function() {// By moving the response handler here, we avoid the need for xmlhttp to be a global variable.
		if(xmlhttp.readyState == 4) {
			if(xmlhttp.status == 200) {
				document.getElementById("make").innerHTML = xmlhttp.responseText;// Erroneous <blockquote></blockquote> removed
			}
		}
	};
	xmlhttp.open("POST", url, true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	//xmlhttp.setRequestHeader("Content-length", vars.length);//Not necessary unless "Connection", "close" is used
	//xmlhttp.setRequestHeader("Connection", "close");//Definately not needed. Could be part of the problem
	// See http://www.hunlock.com/blogs/AJAX_POST-It_Notes
	xmlhttp.send(vars);
}

// Here's a more comprehensive and safer formulation of GetXmlHttpObject.
function GetXmlHttpObject(errorMessage) {
	var r = false;
	try { r = new XMLHttpRequest(); }// Opera 8.0+, Firefox, Safari
	catch(e) {
		// Internet Explorer Browsers
		try { r = new ActiveXObject("Msxml2.XMLHTTP"); }// older IE
		catch(e) {
			try { r = new ActiveXObject("Microsoft.XMLHTTP"); }// IE 5+
			catch(e) {// AJAX not possible
				if(errorMessage) { alert(errorMessage); }
			}
		}
	}
	return r;
}
</script>
</head>

<body>

<div class="inner">
	<select name="select" id="year" size="1" onchange="showMake(this[this.selectedIndex].value)"><!-- NOTE: IMPORTANT CHANGE HERE FOR CROSS-BROWSER COMPATIBILITY-->
		<option value="">Select a Year</option>
		<option value="2000">2000</option><!-- NOTE: OPTIONS NOW HAVE VALUES -->
		<option value="2001">2001</option>
		<option value="2002">2002</option>
		<option value="2003">2003</option>
	</select>
	<p class="style1">&nbsp;</p>

	<div id="make">
		<p class="style1">
		<select name="select2" size="1" id="select2" disabled><!-- Serve disabled -->
			<option>Make</option>
		</select>
		</p>
	</div>
</div>

</body>
</html>

Tested only as far as checking that vars is properly composed.

You will find plenty of comments in the code (important ones in CAPS), and you don't need to implement all my changes - some are just a question of style.

Airshow

Thanks Airshow I will give it a shot today.

muiBob,

I'm guessing that your php is fine because it works with FF etc.

There is a couple of things in the javascript/HTML that may be responsible for it not working in IE. I have given the code a throrough going over, resulting in this :

Tested only as far as checking that vars is properly composed.

You will find plenty of comments in the code (important ones in CAPS), and you don't need to implement all my changes - some are just a question of style.

Airshow

Holy S%*t that worked! Thank you so much! I mean like it instantly worked!! I'm so blown away by it that I'm thinking about buying some pie and celebrate!

Though I am curious to know what you think the main culprit might be?

Now I just noticed a funky thing, the JS file was not actually saved and updated when I uploaded the HTML file. Because on debug mode its still showing the old code.. but everything is working fine.. so at this point the only change Ive made is the value on the event handler, the values on the option tags and disabling the 2nd dropdown.. weird

Now I just noticed a funky thing, the JS file was not actually saved and updated when I uploaded the HTML file. Because on debug mode its still showing the old code.. but everything is working fine.. so at this point the only change Ive made is the value on the event handler, the values on the option tags and disabling the 2nd dropdown.. weird

Disabling the 2nd dropdown won't have any affect. It just gives the user an indication that the menu is not yet populated/active.

The main thing will be onchange="showMake(this[this.selectedIndex].value)" and the associated values in the options. menu[menu.selectedIndex] is the only reliable way to discover a menu's currently seleted option (and hence its value). menu.value has been in a W3C recommendation for ages but has never been 100% implemented in all browsers. It's one of those old Netscape/Moz vs Microsoft things.

Personally, I'm not about to give up using menu[menu.selectedIndex] any time soon. Even if menu.value becomes fully cross-browser, menu[menu.selectedIndex] will still be necessary to get other currently selected option attributes.

Airshow

Disabling the 2nd dropdown won't have any affect. It just gives the user an indication that the menu is not yet populated/active.

The main thing will be onchange="showMake(this[this.selectedIndex].value)" and the associated values in the options. menu[menu.selectedIndex] is the only reliable way to discover a menu's currently seleted option (and hence its value). menu.value has been in a W3C recommendation for ages but has never been 100% implemented in all browsers. It's one of those old Netscape/Moz vs Microsoft things.

Personally, I'm not about to give up using menu[menu.selectedIndex] any time soon. Even if menu.value becomes fully cross-browser, menu[menu.selectedIndex] will still be necessary to get other currently selected option attributes.

Airshow

I greatly appreciate you sharing your knowledge. The solution you provided worked like a champ and great enough for what I needed to get done. Sincere thank you again for saving my a$$.

-muiBob

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.