It does load a new page and the url does update, but when I press the back button, only the url has changed without refreshing but the content doesn't.

$('button').click(function(){
  window.history.pushState({}, '', 'page2.php');
  $('body').html('<div class="loading.gif"></div>');

  //Load Page
  $.get('page2.php', function(data){
    $('body').html(data);
  };

  //Edited 
  $(window).bind('popstate', function(){
    //What should I code here??
  });
});

It does load a new page and the url does update, but when I press the back button, only the url has changed without refreshing but the content doesn't.

$('button').click(function(){
  window.history.pushState({}, '', 'page2.php');
  $('body').html('<div class="loading.gif"></div>');

  //Load Page
  $.get('page2.php', function(data){
    $('body').html(data);
  };

  //Edited 
  $(window).bind('popstate', function(){
    //What should I code here??
  });
});

• javascript
• jquery
• html

• the $.get(...) call is missing a closing parenthesis, but that's probably just an issue in your example. Is the loading image showing up? – John Sterling Commented Jul 31, 2014 at 18:42
• Yes, the image does show up. My problem is that the back button doesn't retrieve the previous content. – Dale A. Almaraz Commented Jul 31, 2014 at 18:50

3 Answers 3

I did something like that :

    $(window).bind('popstate', function(){
  window.location.href = window.location.href;
  });

And it work wonderful.
The code is taking the location from the url and redirect to this url.

I use this to change bar adress and save current state, including current html body, and i reload it on back bouton click without any other ajax call. All is saved in your browser :

1. $(document).ajaxComplete(function(ev, jqXHR, settings) {
   
       var stateObj = { url: settings.url, innerhtml: document.body.innerHTML };
       window.history.pushState(stateObj, settings.url, settings.url);
   });
   
   
   window.onpopstate = function (event) {
       var currentState = history.state;
       document.body.innerHTML = currentState.innerhtml;
   };
   

You need to implement the popstate event. When you click the back button after pushing a state, the page receives the popstate event. In it you need to replace the page contents with the correct page.

See an example from MDN

Updated code:

$('button').click(function(){
  // Store some information in the state being pushed
  window.history.pushState({url:'page2.php'}, '', 'page2.php');
  $('body').html('<div class="loading.gif"></div>');

  //Load Page
  $.get('page2.php', function(data){
    $('body').html(data);
  };

  //Edited 
  $(window).bind('popstate', function(event){
    var url = null;

    if (event.state && event.state.url) {
        url = event.state.url;
    } else {
        url = 'index.html'; // or whatever your initial url was
    }

    // Update the contents of the page with whatever url was stored in the state.
    $.get(url, function(data){
        $('body').html(data);
    };
  });
});