Stop navigation for ajax call

Question

I'm writing an application that has some mixed single-page/multi-page aspects.

Let's say the menu is something like:

About Us | Blog

The About Us link is a regular <a href="about-us.html"> link which navigates away from the current page when clicked.

The Blog link is a javascript link which makes an AJAX call and changes the current page to the blog by dynamically writing in some new HTML.

If the user clicks the About Us link and then changes their mind and clicks the Blog link, I want to cancel the navigation to "about-us.html". What I'm experiencing now is sometimes the about us page takes some time to load and the blog loads and displays first, but because the browser is already requesting the about us page, when that request catches up, the page changes. How can I fix this?

Answer 1

Please try window.stop() from inside your ajax call. For IE you will have to use document.execCommand("Stop");