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 dropdown. I am populating the states in the dropdown using ajax call. The problem is that the states get populated in Mozilla but it doesnt 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

});

Answer 1

Try using append instead of the html method as detailed in this post.

edit

Actually, I've just run into this problem myself. For me the answer was to call empty first, then append which has the same effect (I think?) as using the html method.

Answer 2

Also note that if you use a tagName prefix in your selector it is slower than just using the id.

In your case just use $("#edit-state").append(options)

Answer 3

I just ran into the same issue and none of the suggested fixes helped. Turns out tab characters in the passed string were the cause. As soon as I removed all of them, both html() and append() worked just fine. Guess no formatted strings for IE.. hmpf.

Answer 4

I also encountered this problem. I don't know if it was related to tabs in the html as the post above me states, but i just used old fashion innerHTML DOM method instead as it works fine on all browsers.

I can't really think of any drawbacks of using this method instead of jquery.html() but if there is please inform me and others on this bulletin.

Answer 5

Check that any JavaScript in the returned data is syntactically correct.

I had a JSON options object that had a trailing comma, and that was enough for IE to refuse to run it.

Answer 6

Thanks for the tip of checking the returned html. I am returning html with a lot of JS(jQuery) which I suspected was not formatted good. But IE would not display the html no matter what I changed or even removed the js. So I checked the ajax page and sometimes it returned a "*" just before the html. so I changed the php code that prints the html. Changed this in the returned html from:

<?php {?>

Returned html comes here...

to:

**<?php {?>Returned html comes here...**

The trailing line break was the problem. I have no problem with jQuery $("#div").html(data) in IE elsewhise.

Answer 7

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 8

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 9

I also thought .html didn't work. .html() did work well, the .hide() was the one that didn't work. And the problem was that I tried to hide which IE7 couldn't do...

Answer 10

Are you using 1.4.2? There's an issue with the cleanData method using invalid cache entries in IE. The bug and corresponding fix can be found here. This affects calls to .html()

Answer 11

Hi Everyone,

If you are parsing xml using jquery, and you need html() in IE, try this:

var content = ($.browser.msie) ? $(this).context.xml : $(this).html();

This solved my problem. I hope it will help someone too.

Greetings.

Answer 12

I had the same problem after receiving an AJAX HTML-Request with the function jQuery.ajax() and then trying to parse the result with jQuery( html_result_data ). The solution was to strip the header and all tabs and "returns" in the html_result_data like this:

success: function( data ) {
   // God this is ugly
   data = data.split("<body>")[1].split("</body>")[0];
   data = data.split("\t").join("").split("\r").join("").split("\n").join("");                      
   data = jQuery( data );
   ...
}

Answer 13

Try to validate Yours HTML ... I have the same problem with some closing tags.