jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari

Question

I am having the same problem. Many sites I have found have suggested that IE may be caching your code and suggest to append the code to

$("#home").click(function(e) {
    $(".tabs").attr("src","tabs-home.gif");
    $(".islice").hide('fast');
    $(".islice").load("home.html?" + new Date().getTime() );
    $(".islice").show('fast');
    e.preventDefault();
});

This should ensure that a IE isn't caching.

See http://zacster.blogspot.com/2008/10/jquery-ie7-load-url-problem.html for more info.

$.ajaxSetup({ cache: false });

This will clear cache in IE and .load() will work. I've tried it.

If the HTML that you are loading is broken, jQuery's .load() will not work in IE.. It was the problem for me. After I fixed the HTML , everything worked great in IE also !

I encountered this problem and was scratching my head all day long. However finally found a work around and realized what a weirdo IE is.

First of all,

$(".islice").load("home.html"); 

won't work no matter how hard we try. We will instead have to use

$.get("home.html", function (data) ....... ); 

I will explain the "....." because a usual

$.get("home.html", function (data) { $(".islice").html(data); }); // doesn't work

won't work.

Instead

$.get("home.html", function (data) { 
    data = '"' + data + '"';    
    $(".islice").html(data);
    var newHTML = $('.islice').html();
    $('.islice').html(newHTML.substr(1,newHTML.length-2));
}); // works

will work.

Explanation: => data may have new line chars. so setting innerHTML = data; breaks because of them. By adding quotes we convert it into a string but making that html adds extra quotes so I get rid of the quotes again.

Moral: => IE sucks.. Nothing else..

I found the .load() function did not work very well with IE, but using $.get() instead worked perfectly, e.g.

var dummy = new Date().getTime();
$.get("home.html" + dummy, function(data) {
   $(".islice").html(data);
});