Refresh browser page on browser back click when changing hash value in url

Question

I have a website with filters. I have appended hash whenever any filter is applied. For example i have city, color filter.

URL/#color=red&city=Delhi

Now when someone clicks browser back on such url, it becomes URL/#color=red. The city query string is removed by browser.

The problem is the page doesn't reload itself.

$(window).on('hashchange', function () {
    window.location.reload(true);
});

But this is infinitely loading the page.

Why not use query strings `?` instead of page anchors `#` for the filters? — Adam Konieska, Mar 01 '16 at 13:59
No. Its existing code. This would be a big change. I cant do this. — Sahil Sharma, Mar 01 '16 at 16:12
unfortunately, the HTML you have is invalid and needs to be fixed. — Adam Konieska, Mar 01 '16 at 16:23

score 1 · Answer 1 · answered Mar 01 '16 at 14:05

1

Try history API https://developer.mozilla.org/en-US/docs/Web/API/History_API

e.g.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

answered Mar 01 '16 at 14:05

Devendra Bhatte

358
4
18

score 0 · Answer 2 · answered Mar 01 '16 at 14:40

0

Try turning off caching so that when you go back, the browser will automatically obtain a new page from the server...

More information here...

answered Mar 01 '16 at 14:40

bastos.sergio

6,684
4
26
36

score 0 · Answer 3 · answered Mar 01 '16 at 16:32

You may not want to hear this, but the HTML you have is not valid and needs to be fixed by converting the anchors # to proper query strings ?. This will allow the browser to go back and reload the page.

You can do this using a find and replace in your HTML editor.

If that's going to cause problems to the way you've implemented your filters, you'll need to update your filtering code. If you post that here we can help fix that.

Hope that helps. :-)

I have done. Still page is not reloading on browser back. – Sahil Sharma Mar 02 '16 at 05:42 — Sahil Sharma, Mar 02 '16 at 05:42

Refresh browser page on browser back click when changing hash value in url

3 Answers3