jQuery .load() problem in all IE versions

Question

Hello,

I'm trying to do a dynamic template. I have links in sidebar and I want to load the content dynamically with .load() in jQuery.

I have the following jQuery code for that:

// Services AJAX page loader
 jQuery('.sidenav a').click(function(){
  $page_url = jQuery(this).attr('href');

  // load page
  jQuery('#content').fadeOut(200, function() {
   jQuery(this).load($page_url, function(response, status, xhr) {
    jQuery(this).fadeIn(200);
   });
  });

  // set pagetitle
  jQuery('.pagetitle span').text(jQuery(this).contents().first().text());

  // change CSS current_page_item
  jQuery('.sidenav li').removeClass('current_page_item');
  jQuery(this).parent().addClass('current_page_item');

  return false;
 });

Basically it works great except in IEs.

The problem happens when I click on the link that was firstly loaded without AJAX. You can see an example here http://j.mp/aq3MrH. When you click on the "Profil/vision" in the sidebar, it will load the whole site in the #content div again. It happens only in IEs, in ALL versions. In other browsers it works normally.

Any ideas what can be the problem?

Thank you.

Answer 1

I believe it is a caching issue..

Since the url is the same as the currently displayed page, IE uses the cache (with all the page) and inserts it in the #content div ..

Try adding a timestamp at the .load() request

.load($page_url,{noncache: new Date().getTime()},function(){..})

Answer 2

You appear to be relying on the:

X-Requested-With: XMLHttpRequest

header in the AJAX request to decide whether to send a complete page in response, or just the main content.

Don't do this. It's not 100% reliable that the header will survive its trip to the server, and it messes up caching if you can return different responses depending on this header. This is what's happening with IE: you attempt to load http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ into the content area, but IE already has http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ in its cache because that's also the address of the full page. Consequently IE uses the cached full page.

Other browsers with other caching strategies, and web proxies may also confuse matter. It's just as likely you'll have someone navigate to http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ in the browser and get a cached response containing only the content area, making your site useless.

The proper way to craft a response that depends on a request header is to include it in the Vary response header, for example:

Vary: X-Requested-With

However, IE's implementation of the Vary header is basically broken, so doing so will completely break caching. Instead, the better approach is just to have a different URL for the full page and the content-only-for-AJAX versions, eg:

http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/?xmlhttp=on

In any case, don't do this kind of in-page navigation without explicitly providing navigable, bookmarkable, SEO-friendly URLs (based on history.pushState where available and otherwise #! hash-links). You're doing better than most of these naïve load()-based pseudo-navigation sites by providing non-JS alternative URLs, but still you're putting a bunch of effort into a non-standard navigation scheme that's worse than just using normal page links. It's not worth sabotaging your site's usability just for a fade-in-fade-out effect.