Question

My question is about using Back and Next buttons (of the browser) on an AJAX (dynamical) webpage.

The solution I self came up with:

setInterval(function(){    
                if (location.hash != hash)
                {
                   hash = location.hash;
                   app.url = window.location.href.toString().replace('http://xxxxx.nl/xxxx/#!/','')
                   app.handleURL();
                }
            }, 500);

this function reads the url(hash) and compares it with the last stored url(hash), every 0.5 second. If url has changed (back/next is pushed) it runs handleUrl() which runs more functions to dynamically build my page.

the problem is, this sort of works BUT when I click an html [A] element or when I change the url in an other way (javascript), that content will be loaded TWICE because of the setInterval()… functionality.
How can I build my HTML/Javascript in such way that my content will always be loaded once,

• once when I push back/next

• once when I click on an HTML element/use Javascript functions on
  runtime

I searched the sh*t out of google for a solution, plz help!

Answer 1

You don’t need a timer to check it. Just use the onhashchange event, and fire your AJAX calls when the event is called. This event isn’t supported in IE versions below 8, though, so your method seems fine if you need IE support.

Also, it doesn’t make sense that they’re being called twice for a elements, since there’s no reason for the interval to call your AJAX loader twice just because the hash was changed using an a element. You probably have an event listener attached to the a element which causes it to load the AJAX content, which wouldn’t be needed since you’re detecting any change in the hash, no matter how it was changed.