jquery .html() does not work on ie8

问题:

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.

回答1:

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

回答2:

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.

回答3:

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);
}

回答4:

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.

回答5:

Just a gut feeling, but are you sure that you enter the if-block at all? I am just asking having stumbled in true vs "true" a couple of times myself...

Try:

success: function(data) {
    alert('outside of if');
    if (data.d[0] == "true") {
        alert(data.d[1]);
        $("#dvProudctInstruction").html(data.d[1]);
    }
}

Might not be anything, but at least you would eliminate the possibility that you'd simply never run the code line you've highlighted.

回答6:

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

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

回答7:

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!