jQuery html attribute not working in IE

Question

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 dr

Answer 1

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!

Answer 2

Jukums' comment led me to try turning off ColdFusion debug output and then .html() worked for me in IE8. To force debug output off:

<cfsetting showdebugoutput="No">

Answer 3

On my case too the returned data should be syntactically correct. I had some unmatched tags like , unclosed tags

or .. etc

check if all data is correct

if this is an ajax request, then quick way for debug would be to add a text area outside the area you populate and populate the text area with the returned data. then check that data for inconsistencies. Jquery.html is working fine with IE

Answer 4

Also (in my case) check if you have valid html, I had mismatched tags, and it worked in firefox and didn't in IE(6-8)

Answer 5

In IE8 go to tools-> internet options-> then select the advanced tab. Then click reset to reset all internet explorer settings.

I thought I had a problem with my code but the problem was IE8. This worked a treat.

Good luck and hope this helps.

Answer 6

In my case the problem was with the way I was commenting out my javascript in the data being loaded.

// Works fine

/* Works fine */

<!-- This causes a syntax error in IE -->

I've never had any problems commenting out like that in IE before, only when using ajax to load it into an existing page. No problem with th eother browsers either.