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

I'm hitting my head on the wall against this one ...

I have the following code:

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

It works perfectly fine in Firefox, Safari and Chrome, but IE only runs attr() and does not do either the hide/show or the load. I tried removing the hide and show and it still does not work.

IE reports no syntax errors, even with DebugBar. What could I be doing wrong?

You can see the live site at http://www.brick-n-mortar.com

Solution 1:

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.

Solution 2:

$.ajaxSetup({ cache: false });

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

Solution 3:

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 !

Solution 4:

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..

Solution 5:

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