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

I had a similar problem with loading content into a div in IE (although I wasn't using load(), just get()). Check to make sure that the contents of the page you are loading is syntactically valid. IE will sometimes not render content at all if the content has something wrong with it. In my case, the entire block of content I was trying to load didn't render because of a max-height CSS attribute on an element I was using. IE can be very lazy, not bothering to fix content at all.

Answer 3

It seems that the problem was actually an issue with my user authentication within image_properties.php. For my user authentication I create a "fingerprint" of various headers to add a small level of additional security. One of these was HTTP_ACCEPT_LANGUAGE - for whatever reason, this particular header was changing for AJAX requests in Internet Explorer (but not regular page loads) and therefore causing the user authentication to fail.

Ender's advice got me there though. :)