jquery .html() does not work on ie8

Question

I have a jquery function which makes an ajax call to a webservice method on the web server, the method returns a html table with data. I am using .html() to render the return values on div. This works in Firefox,Chrome, Safari but does not work on IE8

$.ajax({
    type: "POST",
    url: "./../WebAjaxCalls.asmx/GetProductInstruction",
    data: "{'ProductID':'" + $("#txtProductID").val()  + "'}",
    success: function(data) {
        if (data.d[0] == "true") {
            **$("#dvProudctInstruction").html(data.d[1]);** 
        }
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function(e, textStatus, errorThrown) {
        bReturn = false;
    }
});  

The line $("#dvProudctInstruction").html(data.d[1]); works on all browsers except IE8.

Any help on this will be much appreciated.

Answer 1

Whether its .html() that is not working or its something else, check it first. Put an alert and see if you get correct, expected html or not.

alert(data.d[1]);
$("#dvProudctInstruction").html(data.d[1]);

Most likely the html coming in data.d[1] contains error and IE is not able to resolve it.

Answer 2

Have you tried setting data.d[1] to a variable and then adding it?

For Example:

if (data.d[0] == "true") {
     var results = data.d[1];
     $("#dvProudctInstruction").html(results);
}

Answer 3

i have answered this problem on link you just need to change your code to be like this

$("#dvProudctInstruction").html(data.d[1].toString());

Answer 4

It seems IE8 has problems inserting long strings of text with jQuery's html(), making the div's content just completely blank. Just tried it with both a very long string and one containing just 'blah', and that made all the difference.

So if you're expecting very large chucks of text (like 2k+ characters), go for the native innerHTML. Didn't do any further research, so I don't know what's the max length of a string to be passed through html() in IE8.

Answer 5

You could alert your response before assigning it html()

OR

You could use innerHTML property instead html() of jquery (though it's same)

And you might want to check this link

Answer 6

I know it's bit of a late answer; but you could also fix it with a try/catch block. Sometimes you might not have all the control over the content.

This way you keep the original code working for the new browsers, while the catch runs the innerHTML for IE8.

try {
    //new browsers
    $('#dvProudctInstruction').html(data.d[1]);
} catch (e) {
    //IE8
    $('#dvProudctInstruction').innerHTML = data.d[1];
}

Hope this helps someone!