[SOLVED] AJAX innerHTML issue in IE

[liebs19]

Hi guys,

 

I have been working on an AJAX script to populate 1 dropdown box with data from my database when selecting a value in another dropdown box. It works fine in Firefox, Opera, and Safari. However, it will not work in IE. I've been doing some google searches and I have found that IE does not like it when you return HTML data to an innerHTML statement in your AJAX responsetext. There are multiple solutions on how to fix this but none of them are for a listbox. The usually involve nesting div tags and replacing on of them. In my responsetext I am returning multiple <option></option> tags for my listbox, so I don't think that I can do this replace. has anyone come across this problem before? Do you know of a solution to make innerHTML work for a dropdown box in IE when returning HTML in the responsetext?

 

I can post some code if needed but the code isn't the problem. The problem is getting IE to let my innerHTML work.

[liebs19]

I found a workaround for this.

 

I had to nest my entire empty select tag inside of a div tag. Then I had to set the innerHTML of this div and echo out the start and end of the select tag as well as all of the option tags in my php script.

[roopurt18]

You should avoid using innerHTML wherever possible IMO.  I like to return my AJAX requests as JSON.

 

In this case I'd have returned an object a single property named options.  options would be an array of objects with the properties value and display.

 

It would look something like this:

 

  // Inside the AJAX handler
  var sel = document.getElementById("theSel");
  var JSON = responseToJSON(xhr.responseText);
  if(JSON != null && typeof JSON.options == "array"){
    var max = JSON.options.length;
    for(var i = 0; i < max; i++){
      var opt = JSON.options[i];
      var optEl = document.createElement("option");
      optEl.value = opt.value;
      optEl.appendChild(document.createTextNode(opt.display));
      sel.appendChild(optEl);
    }
  }

[liebs19]

What would the response text for this look like? Just an array with the code for the options? How would I return this array through php?

 

This is my first AJAX script, although I am not new to javascript. When I wrote the script and it actually worked right away I was so happy. Then I tried it in IE. What is the reason to not use innerHTML? It seems so easy, and it work everywhere except IE

[s0c0]

liebs19, can you post the code you were having problems with and then post the code with the solution.  I am having the a very similar problem.  Thanks.

[liebs19]

This is the working code involving only the list I was trying to populate.

 

On the page where the list is shown:

<br />Select your city:
<div id="divCityList">
<select name="Cities" id="Cities">
</select>
</div>

 

In the AJAX Javascript:

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
	document.getElementById("divCityList").innerHTML=xmlHttp.responseText;
}
}

 

In the PHP file called by the AJAX:

//code here to connect to db and run the query

echo '<select name="Cities" id="Cities">';
while ($row = mysql_fetch_array($result)) 
{
$city = $row[City];
echo "<option value=" . $city . ">" . $city . "</option>\n";
}
echo '</select>';

[roopurt18]

The PHP script would echo something like this:

 

{
  option : [
    { value : "valueString", display : "displayString" },
    { value : "valueString1", display : "displayString1" },
    { value : "valueString2", display : "displayString2" }
  ]
}

 

And your JS would do something like:

  var obj = exec(xhr.responseText);

 

Read up on JSON to get a better handle for it.

[liebs19]

Ok, thanks for the info.