jQuery .html() function doesnt work in IE 11

Question

In my .net MVC3 web application i have an ajax call that returns some html code. I pass this html into a div like so:

    $.ajax({
            url: 'controller/action',
            data: {id: id,},
            type: 'GET',
            async: false,
            success: function (data) {
                $("#container").html(data);

            },
        });

This works fine in all browsers except ie 11. What happens is that the html doesnt render in #container div unless i click somewhere on the page.

How can i get the html to render without clicking anywhere in ie11?

thanks

Answer 1

 $.ajax({
            url: 'controller/action',
            data: {id: id,},
            type: 'GET',
            async: false,
            success: function (data) {
$("#container").empty().append(data);


            },
        });

Use append instead of html to avoid those issues. empty() is used to clear intially before append.

Answer 2

A likely cause for this is that there is some small piece of syntax in the HTML that is returned by ajax that IE is not happy with. In my case it was caused by having an HTML comment inside a <script> tag. IE fell over but other browsers were fine.

I suggest removing everything from the HTML returned by the ajax call except one line such as 'TEST'. If that works then you know it isn't a JQuery / Javascript issue. You can then add back lines into the returned HTML until you find the line that IE isn't happy with.