IE not populating select through ajax request

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 populat开发者_开发知识库e_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.

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.

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");

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();
}