CODEWITHSUNDEEP
javascripthtml5-history
Ken Bonny
Ken Bonny

Reputation: 789

HTML5 History API Back Button

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.

Upvotes: 1

Views: 2067

Answers (1)

Quentin
Quentin

Reputation: 943108

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.

Upvotes: 2

Related Questions