Question

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?

Answer 1

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.