浏览器后退按钮更改动态URL参数

Question

I am working on a website, where url parameter gets updated based on user action, according to which I update the webpage without refreshing. Consider the scenario of E-commerce where url changes when user clicks on filters and then updated products gets displayed.

Now the problem is, when user clicks on Browsers's back button the browser goes back to previous url-parameter, but page did not gets changed. I want to change the page also based on url parameter that gets changed after back button clicked.

I have tried this solution:

$($window).on('popstate', function (e) {
     // Update the page also
});

The problem with this code is, this gets fired as url changes, means it does not care about if browser back button is clicked, or url is changing using the jQuery. So if I am changing url based on user interaction, the popstate callback will be called and my custom function also. To update the page I am using https requests, so http api gets called two times.

Is there any way to check if only "Back button" is clicked?

Answer 1

I would recommend you to change your design a litle bit and trigger all content updates (the product list in your case) by listening to url changes, not only url changes caused by the back button. So instead of triggering any re-rendering on click events, let these buttons be regular link to the url that represent your content and trigger the functionality from the popstate event.

This is how all MVVM-frameworks like Angular.js, Backbone etc are designed and meant to be used.

By doing this it will also be so much easier for you to maintain the application in the long run.

Good luck!