preserving browser "back" button functionality using AJAX/jQuery to load pages and history.pushState() method

Question

I'd like to preserve the back button functionality when loading pages via AJAX (jQuery load method) and pushing the URL to the browser bar via the history.pushState method. The problem occurs when one clicks on the browser back button and the 1st click only restores the previous URL but does not load the previous page.

Here's my code so far:

$(function(){
  var profile_url= "/profile";
   $('#click_button').click(function(){
      $('#main_content').load(profile_url);
      history.pushState({profile:profile_info}, "profile", profile_url);
   });
});

My question is is there any way to do an AJAX load of the previous page into the #main_content div on the 1st click of the back button?

Any help/advice would be greatly appreciated.

score 13 · Accepted Answer · edited Jul 12 '12 at 17:35

13

I'd like to direct everyone to a jQuery plugin called PJAX which accomplishes what I was ultimately interested in asking this question. Pjax() combines jQuery AJAX and pushState for page loading and preserving browser history.

Here's the code, and here's a nice demo of pjax() in action.

It is really great and easy to use, in the demo, just remember to click the checkbox which is there to help demonstrate pjax()'s functionality.

edited Jul 12 '12 at 17:35

user229044

232,980
40
330
338

answered Nov 06 '11 at 14:01

tim peterson

23,653
59
177
299

1

It's a great plugin for jQuery!! Thank you!! – Roland Burda Sep 30 '12 at 19:48
demo link broken – carefulnow1 Apr 13 '17 at 00:15

score 11 · Answer 2 · answered Oct 14 '11 at 12:32

11

For this you need to subscribe to the 'popstate' event.

The popstate event is fired in certain cases when navigating to a session history entry. HTML5 spec

You could do this like this:

window.onpopstate = function() {
  $('#main_content').load(location.href)
};

answered Oct 14 '11 at 12:32

Anton Timmermans

323
1
8

awesome Anton, thanks that is exactly what i needed! Now i realize how about the browser "forward" button? Any way to control that with jQuery load() method? When i click the forward button after clicking the back button it, not surprisingly, doesn't re-load the page i just navigated away from, thanks, -tim – tim peterson Oct 14 '11 at 14:06
popstate also fires when the forward button is pressed. – Anton Timmermans Oct 28 '11 at 10:26
1

hi Anton, how to discern then between the back and forward button? Is there some kind of if()/else you can do if the user clicks back vs. forward? thanks! -tim – tim peterson Oct 29 '11 at 18:21
For anyone in the future who stumbles upon this, PJAX now has an event called `pjax:popstate`. – hexacyanide Mar 27 '13 at 04:42

score 1 · Answer 3 · answered Oct 14 '11 at 12:31

You can use the popstate event for this purpose. See https://developer.mozilla.org/en/DOM/window.onpopstate for details.

Also have a look at History.js which provides a wrapper and can fallback to url hashtags in case the browser does not support the history api.

preserving browser "back" button functionality using AJAX/jQuery to load pages and history.pushState() method

3 Answers3

Linked