Reputation: 392
I have some code like this:
var mySelect = document.getElementById("mySelect");
mySelect.innerHTML = "<option>Loading...</option>";
$.get("ajaxPage.php", {"args":args}, function(r) {
mySelect.innerHTML = r;
});
The ajax response is something like this:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
And it works gracefully in Chrome, Aurora / Firefox, Opera and Safari (I've tested each one), but IE9 refuses to accept the response.
After looking at IE9's 'Inspect Element' window (I don't know exactly its name) I could see IE9 tries to render the response as a simple text node, such as:
Option 1Option 2
And why that happens is what is bugging me.
I'm sorry if that was already questioned here, I did a little searching and could see no answers that could help me.
TIA, André
Upvotes: 1
Views: 1749
Reputation: 162
The only good practice for any browser, and the only working with Internet Explorer is using DOM, not just html'ed string. Something like this:
Code:
<script>
$('select#my_select')
.append($( document.createElement('option') ).val('opt1').html('Option 1'))
.append($( document.createElement('option') ).val('opt2').html('Option 2'));
</script>
Before:
<select id="my_select"></select>
After:
<select id="my_select">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<select>
Upvotes: 2
Reputation: 805
Try using
$('#mySelect').html("<option>Loading...</option>");
It seems like IE is not evaluating your HTML, jQuery should take care of that issue for you.
Upvotes: 2
Reputation: 4097
This has been an IE bug for as long as I can remember: http://support.microsoft.com/kb/276228
I think that the JQuery equivalent has the bug fixed:
mySelect.innerHTML = r;
//change to
$(mySelect).html(r);
Upvotes: 3