history.js reload page on back button

Question

I'm new to html5 and history.js, still trying to grasp the concept of history.js. two questions here.

1. is history.js just used to change the URL in the address bar with out a page refresh? (like using the hash to manipulate the url)

2. I've done a simple code using history.js (here is my fiddle)

the url of page one is http://mysite.com?id=1,2,3

when one of the button's below are pressed, the JS code hide the button and it will remove the ID from the url and using history.js change the url in the address bar

<input type="button" value="delete id 1" data-remove-id="1" class="remove" />

<input type="button" value="delete id 2" data-remove-id="2" class="remove" />

<input type="button" value="delete id 3" data-remove-id="3" class="remove" />

question is, when i hit the back button, the url changes correctly, but how do i make it unhide the hidden button? or how do i refresh the page? or do i use ajax? what is the best practice?

Answer 1

1. Yes, it allows you to save current state information (if you want), and push the current url into the history and load a new url into the url bar. It does not reload the page. The assumption is that you are doing something with javascript (an AJAX call or some other code running) on the client that corresponds with the change in URL.

2. Your browser's back button and history.js will not undo any javascript code that you've done. You should use AJAX to reload the page for that previous URL, which should readd the hidden button. So it's a slight nuance - pressing the back button won't unhide the button, rather it will recreate the button from the original code which you get from another AJAX call.

Update:

You can bind a handler to the window.onpopstate event.

window.onpopstate = function(event) {
  // your code...
}