Set page history with page content by js

Question

I've used pace.js but the problem with pace was, the loading animation was shown after the page was completely loaded.

So, i have tried and made a solution, onclick every link on the page, jquery grabs and stops the event from the browser going direct to the link, and sends a ajax get request to that link. While the page is loading, it shows an animation on the current page. After the page is completely loaded, it replaces the whole current document with the received data and replacing the page url in the address bar.

    <script type="text/javascript">
    $( document ).ready(function() {
     $('a').click(function() {
            var dt;
            if (/#/.test(this.href)) {
                return true;
            }else{
                document.getElementById("before-loader").style.display= "block";//show loading animation
            var that = this;
            $.ajax({
                  type: "GET",
                  url: that.href,
                  success: function(response){
                    document.open();
                    document.write(response);
                    document.title = response.pageTitle;
                    window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", that.href);
                document.close();
                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ' ' + errorThrown);
                    document.getElementById("before-loader").style.display= "none";//hide loading animation
                  }
                });
            return false;
          }
      });
    });
    </script>

The problem is on clicking browser back button, the url in the address bar is changing but the page content still remains the same. How can i overcome this problem?

Update

se0kjun's answer didn't solved my problem(i was expecting it to work after copy/paste the code provided) but put me in the right direction. After some study and rewriting the flow, it works, but i am still confused why it works.

$( document ).ready(function() {
 $('a').click(function() {
        if (/#/.test(this.href)) {
            return true;
        }else{
      window.history.pushState(null, 'Production Workflow & Sales Management', this.href);
            loadContent(this.href);
        return false;
      }
  });
});


function loadContent(href) {
  document.getElementById("before-loader").style.display= "block";
  $.ajax({
    type: "GET",
    url: href,
    success: function(response){
      document.open();
      document.title = response.pageTitle;
      document.write(response);
      document.close();
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert(textStatus + ' ' + errorThrown);
      document.getElementById("before-loader").style.display= "none";
    }
  });
}


window.onpopstate =  function(event) {
  link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
  loadContent(link);
};

Maybe i should study more.

I think... you need `popstate`. http://stackoverflow.com/questions/8038726/how-to-trigger-change-when-using-the-back-button-with-history-pushstate-and-pops — se0kjun, May 09 '16 at 04:14
but how to use `pushstate` and `popstate` with this function? i have tried, it gives me same result. the page content remains the same. can you give me example? Where the pages are stored in `pushstate` and `popstate`? — Md. Khairul Hasan, May 11 '16 at 05:33

score 1 · Answer 1 · answered May 11 '16 at 14:18

I think you want to popstate event.

When you click a link, ajax request to that.href. After that, if request is successful, you would get response and call pushstate.

When you click a back button, popstate event is triggered. you can load previous page in popstate event handler.

Following to usage example of popstate

window.onpopstate =  function(event) {
  //you add a path in pushstate
  $('.container').load(event.state.path);
  alert('popstate');
};

Here's a fiddle

Set page history with page content by js

1 Answers1