Alex Rivera | Logout

jQuery html attribute not working in IE

Asked 2009-01-05T10:18:54.777
20

I am using country and state dropdowns in my form. Whenever the user selects the country in the dropdown, the respective states of the country will populate in the states dropdown. I am populating the states in the dropdown using AJAX call. The problem is that the states get populated in Mozilla but it doesn't work in IE. I guess there is some problem in jQuery while loading the states in the states dropdown. The jQuery code i am using is 

$('select#edit-country').change(function(e) {

    $.getJSON("loadContactUsStates",{id: $(this).val(), ajax: 'true'}, function(j){
        var options = '';

        for (var i = 0; i < j.length; i++) { 
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

        }

    <!-----I guess the problem is with the below line------------------>
       $("select#edit-state").html(options);

    })//end json

});
jquery html forms
Edit
Report

1 Answer

4

This is what worked for me: (I tested on IE7 - IE9, and Chrome)

It looks like the trick for IE is to use a DIV wrapper

Original html:

<div  id="dynamicMenu"></div>

jQuery script:

$.ajax({

            url: "/myapp/myajaxUrl.jsp",
            type: "GET",
            dataType: "html",
            async: false,
            success: function(msg) {
                $("#dynamicMenu").html(msg);
            });

Where msg is something like:

<TABLE>
<TBODY>
 <TR>
  <TD><LABEL for="dropdown1">OS type:</LABEL></TD>
  <TD>
   <SELECT id="dropdown1">
    <OPTION selected value="">Select OS</OPTION>
    <OPTION value="WIN">Windoze</OPTION>
    <OPTION value="UX">Unix</OPTION>
    <OPTION value="LX">Linux</OPTION>
   </SELECT>
  </TD>
 </TR>
</TBODY>
</TABLE>

I tried .empty() .html() to no avail but the above worked great!

answered 2011-09-20T02:08:34.173

Your Answer