I'm working on a site that serves content via AJAX.
If you click an item in the menu, a content div gets updated with $.get response, nothing fancy.
I'm implementing history.pushState to allow navigation with the browser's back/forward button.
I have the following to load content on history navigation:
$(function() {
$(window).bind("popstate", function() {
$.getScript(location.href);
});
});
The problem is, when a page is loaded for the first time, this function does $.getScript so the page is loaded immediately again. The first time the page is loaded it renders the initial HTML view, then on the second load it renders the JS view, since its a JS request.
How could I prevent this event from firing on pages with HTML requests?
Using the native HTML5 History API you're going to run into some problems, every HTML5 browser handles the API a little bit differently so you can't just code it once and expect it to work without implementing workarounds. History.js provides a cross-browser API for the HTML5 History API and a optional hashchange fallback for HTML4 browsers if you want to go down that route.
For upgrading your website into a RIA/Ajax-Application you can use this code snippet: https://github.com/browserstate/ajaxify
Which is part of the longer article Intelligent State Handling which goes into explanations about hashbang, hashes and the html5 history api.
Let me know if you need any further help :) Cheers.
You need to get the event.originalEvent
// Somewhere in your previous code
if (history && history.pushState) {
history.pushState({module:"leave"}, document.title, this.href);
}
$(window).bind("popstate", function(evt) {
var state = evt.originalEvent.state;
if (state && state.module === "leave") {
$.getScript(location.href);
}
});
When the popstate event is fired on page load it will not have a state property in the event object. This allows you to check if the event is fired for a page load or not.
window.onpopstate = function (event) {
if (event.state) {
// do your thing
} else {
// triggered by a page load
}
}