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

Question

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

Answer 1

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.

Answer 2

$.ajaxSetup({ cache: false });

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

Answer 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 !

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

Answer 5

I found this workaround to be working:

$.ajax("loaded.html", {
    cache: false,
    success: function(data, textStatus, jqXHR) {
        $("#content-1").html(data);
    },
    dataType:"html"
});

where:

• "loaded.html" is the URL to the file to load.
• $("#content-1") is the element that will contain the loaded data (and scripts).

Answer 6

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

Answer 7

I think the problem occurred because the ambiguous encoding. Try to specify the response encoding explicitly (that is, the charset in the HTTP Header), something like:

<meta charset="utf-8">

Answer 8

Ok guys... I had same problem with ie 8 and older. This is my solution, hope it helps somebody:

1) At first it's pretty hard to debugging ajax in IE. Why? Console is not upto the mark, but there is another bigger problem - caching. First time you load something wrong it stays in cache. Than you spend 2 hours fixing problem seeing same result (when you do this 1st time). Thanks to this article (and discusion): http://zacster.blogspot.cz/2008/10/jquery-ie7-load-url-problem.html I customized my ajax calls like this:

$(container).load(link +'?random=' + Math.random()*99999 + ' .post-list li', function() { // do some stuff }

Random URL works great

2) @Neno is right! IE have problems with mistakes in HTML. Validate your loading HTML http://validator.w3.org/

Answer 9

I had the same problem with IE9.

All ajax requests die silently by default. By using http://api.jquery.com/ajaxError/ I was able to determine the type of error by logging the exception message: An error with the code c00ce56e.

It turns out that this means the response is not being passed utf-8 encoded, as it should be in response to an ajax request.

Turns out I had an typing error in header('Content-type: text/html; charset=utf-8');

Answer 10

The e.preventDefault() won't make any difference in IE - you'll have to use return false; to stop things from happening:

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

To debug this in detail, take a look at Firebug.

Answer 11

I was having a similar issue and was able to make it work this way:

.load() and .html() don't work very well in IE; especially if you don't have valid HTML.

$("#home").click(function(e) {
    $(".tabs").attr("src","tabs-home.gif");
    $(".islice").hide('fast');
    $.ajax({
        url: "home.html",
        success: function(data, textStatus, xhr) {
            $(".islice")[0].innerHTML = data;
        }
    });
    $(".islice").show('fast');  
    e.preventDefault();
});

Answer 12

To prevent having IE bugging on that, add a math.random() parameter to it so it doesn't use this unrelevant cache...

Answer 13

You're .load()ing into a <table>?

Hmm... Maybe push the .islice class up a level, into the <td>, or maybe a <div> in between...

(Not that that's necessarily the issue, but it's a possiblity...)

Answer 14

I have same problem, for me work add in head

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

Answer 15

If load is with PHP, reset your array values. For example:

$result = ''; // do this
$row = ''; // do this
$data = ''; // IMPORTANT Kills odd behavior CACHE FOR IE

$result = mysql_query("your sql here");
while ($row = mysql_fetch_array($result)){          
$data[] = $row ..... blah blah blah...