JQuery appendTo (), json not working in IE 6,7,8
I have been trying for two days to find a solution for this. I am using jQuery.ajax () to grab values from the database to update a field when another field changes. The php script grabs the values from the database and then spits out the json. IT works fine in FF, but in all versions of IE, the select box is not updated. I have confirmed that the json output is good.
Here is jQuery:
function getVendors(dest,selectSup)
{
var vend = $('select#sup').val();
$.ajax({
beforeSend: function(){
$("select#dest").parent().addClass('loading');
},
type: "GET",
dataType: "json",
cache: false,
url: '/search/cruiseselect/?type=vendors&supplier=' + vend + '&dest=' + dest,
timeout: 2000,
error: function() {
alert("Failed to submit");
},
success: function(data) {
$("select#sup option").remove();
var any = "<option value=\"any\">-- All Cruise Lines --</option>";
$(any).appendTo("select#sup");
$.each(data, function(i, j){
if(j != null && j != undefined) {
var sel = j.value == selectSup ? " selected" : "";
var row = "<option value=\"" + j.value + sel + ">" + j.text + "</option>";
//$(row).appendTo("select#sup");
$("select#sup").append(row);
}
});
},
complete: function(){
$("select#dest").parent().removeClass('loading');
}
});
}
jQuery(document).ready(function(){
//dynamic select boxes
$("select#dest").change(function(){
var selectSup = $("select#sup").children("option:selected").val();
getVendors($(this).val(),selectSup);
});
});
I have this in my php
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode($json);
And it outputs the correct json without any extra commas or whatever. What else is there if I use alert (j.value + j.text); in my .each () loop I am getting correct data in IE, so it seems that jquery appendTo () is not working.
Does anyone have any idea?
I'm a little surprised that jQuery doesn't handle this (I thought it was possible ... maybe .html () does).
The problem is based on IE bug (6,7, & 8) you cannot install the picklist .innerHTML .
Using "vanilla" Javascript, you can use the Option object to create new options and add them to the selection, or you can set the entire Select list at once (including select tags, for example).
var mySelect = $("select#sup").get(0);//get actual DOM element
var newOpt,selLen;
for(var i=0;i<10;i++){
newOpt = new Option('Label: ' + i, i);
//format new Option(text, value, defaultSelected, selected);
//add new option to select object
selLen = mySelect.options.length;
mySelect.options[selLen] = newOpt;
//This may also work, but I don't recall if IE6 supports the .push()
//method on the options collection, if so, this line will replace the 2 above
// mySelect.options.push(newOpt);
}
source to share