How to explain to the browser to remember the Ajax request?

Question

There is a problem with the "back" button of the browser and my application. The webapp uses ajax and standart requests. That all happens this way:

1. I make GET request to list.jsp page - it's the first page you see in application if you check the temp link I provided below. Now we are on Page 1 (the whole page was reloaded)

2. I make Ajax request (click on link - i.e. page number) to page 4. Only the parth of page was reloaded - everything is OK. Thus now we are on page 4

3. I make Ajax request (click on link - i.e. page number) to page 5. Only the parth of page was reloaded - everything is OK. Thus now we are on page 5

4. Now I press the browser "back" button (one step back to history) - nothing happened. The browser consoles does not show any changes.

5. This step I press the browser "back" button again. It turns out that this step executed correctly. GET request happened.

What is going on? Why does the browser not remember changes that hapaned on step 3 ? How can I instruct the browser to make step back to history to the changes that was made by ajax request?

You can check it online by temp link. Just try to go throuh the pages. The pink square is current page indicator.

---

update 1:

This code initialized after loader finished loading recources.

$(function() {

    $(window).on('hashchange', refreshByHash);

    refreshByHash();

    function refreshByHash() {              
        var hash = window.location.hash; 
        console.log("hash = " + hash.substring(1));

        /* $.ajax({

               url : 'paginator.action?page=' + hash, // action
               type : 'GET', //type of posting the data
                dataType : 'html',
                async: true,
                success : function(htmlData) {
                    $('#paginator').html(htmlData);
                },
                error : function(xhr, ajaxOptions, thrownError) {
                    alert('An error occurred! ' + thrownError);
                },

            }); */

       }

 });

Answer 1

I would suggest you to put a hash parameter in the url, that way the browser would handle the history properly, and listen to hashchange events. In most cases you can store the page state directly there, so you don't have to implement your own history handling. I've put together a little MCVE:

$(function() {

  // setup some pagination bar
  for (var i = 1; i < 11; i++) {
    $('#pages').append(
        $('<a/>').text(i).attr('href','#'+i)
    );
    $('#pages').append($('<span/>').text('.'));
  }

  // load contents of page i
  function _uiPage(i) {
      // imitate some XHR
      setTimeout(function() {
          $('#page-content').text('This is page ' + i);
      }, 200);
  }
  
  // load contents of current page based on hash
  function refreshByHash() {
      var hash = window.location.hash;
      _uiPage(hash ? +hash.substring(1) : 1);
  }
  
  // refresh on hash change
  $(window).on('hashchange', refreshByHash);
  // initial state on page load
  refreshByHash();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pages"></div>
<div id="page-content"></div>

Note: Chrome's back button will go back in the active iframe, so after you clicked on some of the pages, you can press the back button to test the behaviour, and the outer frame, StackOverflow itself will not change.

Also take a look at thoe question: How to manage browser “back” and “forward” buttons when creating a javascript widget

---

Edit1

$(function() {
  $(window).on('hashchange', refreshByHash);
  refreshByHash();

  function refreshByHash() {              
    var hash = window.location.hash; 
    // ----- strip the hashmark here -----
    hash = hash ? hash.substring(1) : '';
    console.log("hash = " + hash);

    $.ajax({
      url : 'paginator.action?page=' + hash, // action
      type : 'GET', //type of posting the data
      dataType : 'html',
      async: true,
      success : function(htmlData) {
        $('#paginator').html(htmlData);
      },
      error : function(xhr, ajaxOptions, thrownError) {
        alert('An error occurred! ' + thrownError);
      },
    });
  }
});

Answer 2

When user clicks on #idPage (btw, use classes instead, now you have multiple elements with the same ID and that's not good) since href attribute is empty, the browser will load # (and will go to the top of the page).

You should prevent default behavior when user clicks on links, e.g.

$('body').on('click', '#idPage', function(e) {
   // some code goes here
   e.preventDefault();
});

Hashtag (#) has effect on back/forward button. If you append hashtag and click "back", the browser will return you to the state before hashtag was applied.