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"> </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>";
}