Browser back button changes dynamic URL settings Parameters

Question

I work on a website where the url parameter is updated based on user action, according to which I refresh the web page without updating. Consider an e-commerce scenario where the URL changes when a user clicks on filters and then updated products are displayed.

Now the problem is that when the user clicks the back button of the browser, the browser returns to the previous url parameter, but the page does not change. I want to change the page also based on the url parameter, which changes after clicking the back button.

I tried this solution:

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

The problem with this code is that it starts as url changes, means that it doesn’t need the browser button to be clicked, or the URL is changed using jQuery. Therefore, if I change the url based on user interaction, the popstate callback and my user function will be called. To refresh the page, I use https requests, so the HTTP api is called twice.

Is there a way to check if only the back button is pressed?

Answer 1

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

This is how all MVVM frames, such as Angular.js, Backbone, etc., are designed and intended to be used.

Thus, it will be much easier for you to maintain the application in the long run.

Good luck