Im currently using Code Igniter to have pretty URLs, and I have this system that basically uses ajax to allow you to search for gyms.
Im using push state after a list of gyms is loaded, like this:
example.com/list/search_key/pagination-page/sort-by/filters~seperated~by~that
Where search_key is the city, state, or neighborhood in the area they want to search gyms, and filters are individual checkboxes.
What happens, is I use .ajax to send the search key and each individual checkbox value (either 1 or 0) through post, then code igniter uses the POST data and PHP, to generate a url like the one above. The ajax success push states the URL to be the one the PHP generated.
The problem is, that if you use say pagination to go to page-2, and you want to go to page-1, naturally youre going to use the browsers back button. The problem is, that it only backs the URL address bar to the url before hte current one, it doesnt actually change the pages content. I need it to either reload the page using the old (previous) url, or refresh, or something.
I can even use ajax to resubmit the form using the URL data, but I have no clue how to do this.
I have tried a few things, but nothing works at all. Pretty much I've tried everything on the first page of google, and everything seems promising but nothing actually works.
Is there anyway to refresh the page, if a pushstate url changes to a previous url?
PS Heres some of the key things Ive 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>
The reload() method reloads the current document. The reload() method does the same as the reload button in your browser.
How do I stop page reload/refresh on hit back button? You have to detect browser back button event and pass as an input of the page you want do prevent URL reload that indicates you if you came from a back button click. this code: $(window). on('popstate', function(event) { alert(“pop”); });
The big difference is, that while pushState will create a new entry in the browser's history, replaceState will only replace the current state. As a side effect of this, using the replaceState method will change the URL in the address bar, without creating a new history entry.
In an HTML document, the history. pushState() method adds an entry to the browser's session history stack.
Since you are pushing the state from your ajax success method, you can detect the back button using the window.onpopstate
method.
Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on 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
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With