IE not populating select through ajax request - php

Question

Hi I have two dropdowns and I am populating second one on the basis of first one. My first select is
<select name="projects" id="projects" onchange="populate_users(this.value);">
<option value='1'>ABC</option>
<option value='2'>DEF</option>
</select>
And I populate second select box on the basis of first one which is
<select name="users" id="users">
</select>
Here is my populate_users method
function populate_users(project_id)
{
var url='<?php echo($this->url(array(),'admin/clientproject1'));?>';
url2=url+'project_id='+project_id;
//alert(url2);
jQuery('#users').html('<div style="position:absolute;">'+jQuery('#users').html());
//ajax call
jQuery.ajax({url:url2,success:function(data){jQuery('#users').html(data);}});
}
And on admin/clientproject1 I simply query to table and start a loop to draw options like this
$rd=$db->fetchAll($q);
for($i = 0; $i < count($rd); $i++)
{
?>
<option value="<?php echo($rd[$i]->id);?>">
<?php echo($rd[$i]->username);?></option>
<?php
}
?>
$rd is having values. The second select is populated and all values are showing in
Firefox but in IE it is just showing blank dropdown and not showing any error.

Answer 1

You should return a json string of values and create the option elements in javascript. Then inject those option elements into your select. A bit more coding, but it's better.

Answer 2

Whenever I see the words AJAX, IE, and not populating, I think of the IE cache and how it doesn't play nice with AJAX. Since the issue is browser based, I don't see how it can be a problem with your actual php and the formatting appears to be correct, maybe try setting some headers in the php page that is querying the db.
header("Expires: Sun, 19 Nov 1978 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Answer 3

My solution is create the 'option adding' in server and javascript 'eval' in client the passing Ajax result:
Server Sample PHP code Populate Select :
leetablaIE.php :
$DBName=$_GET["db"];
$tabla=$_GET["tabla"];
$Query=$_GET["query"];
$id=$_GET["id"];
$User="???????";
$Host="????????";
$Password="????????";
$Link=mysql_connect( $Host, $User, $Password);
if (!$Link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db($DBName, $Link) or die('Could not select database.');
$Result=mysql_db_query ($DBName , $Query , $Link);
echo 'var obj_option;';
echo "obj_option = document.createElement('option');" ;
echo "obj_option.setAttribute('value', '');";
echo "obj_text = document.createTextNode('".utf8_encode('Select Value')."');" ;
echo "obj_option.appendChild(obj_text);";
echo "document.getElementById('$id')".".appendChild(obj_option);"; //myselect
while($Row = mysql_fetch_array($Result)) {
$valor=utf8_encode($Row[0]);
$texto=utf8_encode($Row[1]);
echo "obj_option = document.createElement('option');" ;
echo "obj_option.setAttribute('value', '".$valor."');";
echo "obj_text = document.createTextNode(\"".$texto."\");" ;
echo "obj_option.appendChild(obj_text);";
echo "document.getElementById('$id')".".appendChild(obj_option);"; //myselect
}
mysql_free_result($Result);
in Javascript Client :
function leetabla(db,tabla,query,id,bro){
// bro = passing browser ex: MSIE
// id = passing id select to populate in example myselect
// db = database
// tabla = table (mysql id this case)
// query = query you need to populate ('select ....')
////////////////////////////////////////////////////
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(bro!='MSIE'){
document.getElementById(id).innerHTML="";
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
else
{
//alert(xmlhttp.responseText);
eval(xmlhttp.responseText);
}
}
}
if(bro!='MSIE'){
//alert(query);
//normal populate code not in this code 'leetabla.php'
xmlhttp.open("GET","leetabla.php? db="+db+"&tabla="+tabla+"&query="+query+"&id="+id,true);
}
else
{
//alert(query);
// call to php script to IE case leetablaIE.php (upper sample)
xmlhttp.open("GET","leetablaIE.php? db="+db+"&tabla="+tabla+"&query="+query+"&id="+id,true);
}
xmlhttp.send();
}