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.