jQuery load not updating the document in Internet Explorer

Question

The dreaded IE strike again. :(

I've been developing an image selection and upload tool for Tiny MCE using modal dialogs over the last few days. During the script, jQuery's load() function is used a number of times to load external HTML and insert it within a specified div element.

Everything has been going ok, even in IE, until about half an hour ago when I booted IE to check a change and all of the load() calls now do nothing. Where the content should appear in the document (having checked the developer tools), there is an empty div. There are no errors reported either. I can however, update the element manually by using html().

Up until a few hours ago it was all working fine in IE... now it does nothing. I've tried using full addresses (no such luck), have cleared the browser cache and tried sending no-cache headings from the php document being called by load(). Could it be some kind of caching issue?

Here is an example of the first of many similar calls:

//Create the dialog.
if ($('#imgPropDialog').length == 0) {
    $('body').append('<div id="imgPropDialog" class="jqmWindow"></div>');
    $('#imgPropDialog').load('system/admin/ajax/image_properties.php');
}

The imgPropDialog div is correctly added and appears within the document in IE. But the contents of image_properties.php never appears. Works fine in Chrome (and presumably every other browser than IE).

Any ideas before I start ripping out all my changes? Thanks

Answer 1

You could quickly test whether or not caching is your problem by adding a random query string into the URL like so:

$('#imgPropDialog').load('system/admin/ajax/image_properties.php?_=1234');

If that makes it work, then caching is your problem. AJAX GET requests (which is what .load() uses) are cached by IE. If you want to stop caching on a per-request basis, you will need to use $.ajax() instead, which the cache option set to false. Alternately, you can generate your own random query string (which is all the jQuery cache: false option does anyways).

Or, if you want to disable AJAX caching altogether, do this:

$.ajaxSetup ({
    // Disable caching of AJAX responses */
    cache: false
});

See this question: Stop jQuery .load response from being cached

EDIT

Additional suggestion: try something like this and see what happens

$.ajax({url: 'system/admin/ajax/image_properties.php', cache: false, success: function(data, textStatus) {
    alert($(data).html());
}});

Hopefully that alert will tell you what (if any) information is coming back. If it doesn't pop up, either the request is failing somehow, or IE is somehow ignoring the no-cache.

Answer 2

Quick workaround, add random number as parameter at last to make sure every time its new request.

e.g.

$('#divID').load(jspFrom + '?param1name=' + param1value+ 'param2name=' + param2value + '&random=' + Math.random();