HTML5 History API Back Button

Question

I'm using an ajax call to update a part of my page, it's for a search function. When I do the search, I update the url. Example: mysite.com/products becomes mysite.com/products?search=blabla

But when I press the back button, only the url changes and not the content of the page.

This is the function I use to set the history:

function setHistory(data, url) {
    var search = $("#Search").val();
    url = url.replace('search_input', search);
    history.pushState(data, "", url);
}

The data is what is changed on the page and the url is the new url to push to the history. Is there something I'm doing wrong? Shouldn't the page update itself if I use the back button? It won't work in chrome nor in IE 10.

Answer 1

You need to listen for a popstate event and change the page back.

addEventListener('popstate', function (event) {
    event.state; // this contains the state data from `pustState`. Use it to decide what to change the page back to.
}

See also, MDN.