Geek asks and answers

How to use history.js?

My site has a navigation 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 forth buttons that only make the #container div back and forth in state. I read that history.js would be the best for this, and I looked through the html5 api history, but I don't understand how to solve my problem. Also, how would I start implementing the refresh button?

+3
source share
1 answer

It looks like what you're looking for is something like PJAX .

To be clear, the HTML5 History API (which implements History.js / gaskets) does not support the direct state of your application. Rather, it provides a mechanism for mapping changes to the window URL of the function responsible for actually displaying the changes. readme offers some insight into how this can be achieved:

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

If instead of registering the state you want to change the contents of the container (without using PJAX or a similar library), you can instead save the contents #containerwith each call pushStateand configure 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 change this to reflect the specifics of your situation.

+6
source

More articles:


All Articles