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?
Add a comment |
1 Answer
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.
2 Comments
Wilfred
Ok I checked out the pjax thing and it seems to work. Although I don't know how to get the loading gif working. this is the line of code I have that does the pjax when a link is clicked
$('li a').pjax('#container'); and then the link <li style="list-style-type: none;"><a href="main.html"><div id="sortmain" class="catagories">main</div></a></li> main.html is an actually file that it desplays in the #container. It works, and I can go back and forth, but it looks very glitchy and I want to know how to implement the loading gif.Wilfred
also because main.html is an actual file that it is calling, i can't refresh the page or it will only show that files output. how can i fix this?