How to use history.js?

ajax, history.js, jquery

Solution

It sounds like what you are looking for is something like PJAX.

Just to be clear, the HTML5 History API (which History.js implements/shims) does not maintain the state of your application directly. Rather, it provides a mechanism for mapping changes in the window URL to a function responsible for actually rendering the changes. The readme offers some insight into how this might be achieved:

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState(); 
    History.log(State.data, State.title, State.url);
});

If, instead of logging the state, you wish to alter the container's content (without using PJAX or a similar library), you might instead store the contents of `#container` each time you call `pushState` and adjust the handler function to do something like this:

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState(); 
    $('#container').empty().append(State.data.content);
});

History.pushState({content:"Hello, world!"}, "State 1", "?state=1");

Of course, you will need to alter this to reflect the specifics of your situation.

Problem

In my site, there is a nav bar on the left. When I click the links they change the #container div on my page but nothing else through ajax. I want to put back and forward buttons that will make just the #container div go back and forward in state. I read that history.js would be the best thing for this and I went through the html5 history api but I don't understand how to solve my problem. Also, how would I go about implementing a refresh button?

Original source