CODEWITHSUNDEEP
jqueryajaxpushstate
Nick
Nick

Reputation: 229

Moving back to a pushState entry that used ajax

I'm having an issue with the following situation.

  1. User visits site
  2. User clicks link which uses history.pushState to update the url
  3. Partial page content loaded via ajax (using jQuery)
  4. User clicks regular link which loads a new page
  5. User clicks back to return to the pushState entry
  6. The page now displays only the page partial that was retrieved via ajax

I've souped up a site using pushState for various things and the result is a shockingly responsive web app, but this issue is preventing me from using this.

Here's a sample of the code:

$('a').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});

popstate = function(url){
  $('#content').load(url);
}
window.onpopstate = function(event){
  popstate(window.location.href);
  event.preventDefault();
}

Notes:

Upvotes: 16

Views: 5945

Answers (1)

Cherik
Cherik

Reputation: 246

It seems that some browsers often confuse the partial loaded via ajax and the entire page, decorated with its layout. That's because they both have the same URL. So when the user click on the back button, the browser won't load the URL and will just display the partial it has previously downloaded via ajax.

To avoid this and maintain two separate internal caches (one for the partial page and one for the entire page), you should add a GET parameter in the URL when calling via ajax. Like this in your code:

popstate = function(url){
  $('#content').load(url+'?_ajax=1');
}

Hope this helps.

Upvotes: 19

Related Questions