jQuery .load() problem in all IE versions

Question

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. 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(){..})