How to reload a page when clicking on it after pushState?

Question

I am currently using Code Igniter to have nice URLs, and I have this system that mainly uses ajax so you can search for gyms.

I use push state after loading the list of gyms, for example:

example.com/list/search_key/pagination-page/sort-by/filters~seperated~by~that

Where search_key is the city, state or district in the area where they want to search for gyms, and filters are separate flags.

What happens, I use .ajax to send the search key and each individual flag value (1 or 0) through the post, then the code igniter uses POST and PHP data to generate a URL like the one above. Enhanced ajax success indicates that the URL will be created by PHP.

The problem is that if you use a paginated page to go to page-2, and you want to go to page 1, you will naturally use the browser back button. The problem is that it only supports the address bar of the URL to the URL to hte current, it does not actually change the contents of the pages. I need to either reload the page using the old (previous) URL, or refresh, or something else.

I can even use ajax to resubmit the form using the given URLs, but I don't know how to do this.

I tried a few things but nothing works. Pretty much I tried everything on google's first page and everything seems promising, but nothing really works.

Is there a way to refresh the page if the pushstate URL changes to the previous URL?

PS Here are some of the key things I tried:

<script type="text/javascript"> $(window).unload(function(e){ e.preventDefault(); alert("Back was pressed!"); }); // If this wouldve worked, it wouldve atleast alerted me that. // The code off this URL: http://www.mrc-productivity.com/techblog/?p=1235 // Some of the codes off this URL: http://forum.jquery.com/topic/howto-force-page-reload-refresh-of-previous-page-when-back-button-is-pressed // A few others. </script> 

Answer 1

Since you are pushing state from your ajax success method, you can find the back button using the window.onpopstate method.

Note that simply calling history.pushState () or history.replaceState () does not raise a popstate event. The popstate event is only triggered by a browser action, such as clicking the back button (or calling history.back () in JavaScript).

 var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); window.onpopstate = function(event) { if(event && event.state) { // event.state.foo } }