Different method for jQuery.load(); To allow a stop method on the load process.

Question

This is my first question on here, and I couldn't find any related questions that seem to have the same problem. I found a few people talking about .bind() to disable a link, but my problem is having multiple links that are in different parts of the site loading different pages.

So I am wondering if there is a simple ajax load method I could use that has an option of stopping and clearing what it was loading, if another link is clicked to load something else.

I am doing this as a precaution for the impatient people out there on the web. Since, calling one load onto a div and then calling another load onto the same div sometimes results in the first load taking longer and end up loading after the second one loads.

This is what I am using at the moment.

$('#content').empty().load(event.value, function() { //callback });

I am pretty sure there is no way to stop a .load() method once it is called, so is there another load method out there that can be stopped?

Answer 1

You might want to keep something like a sequence number in the data associated with the container. Increment the sequence number each time the load is called, then check in the callback whether the sequence number is less than or equal to the expected sequence number before actually loading data. In this scenario, you would use get instead of load as you're separating the retrieval of the data from the injection of the content.

$('#content').empty().each( function() {
     var $this = $(this);
     var seq = $this.data('seq') || 0;
     $this.data('seq',++seq);
     $.get( event.value, function(data) {
         var newSeq = $this.data('seq');
         if (seq >= newSeq) { // ignore if a later request has been made
             $this.html(data);
         }
     });
});

Answer 2

@tvanfosson : I think your code is a little above my head. And I don't seem to completely understand how to implement it. I probably should have posted more code as well to allow you to explain what would happen.

But I did just find a different way to kill the load() method.

I am running most of the site off one page with SWFAddress.js that makes changes when the url changes. So everytime my url changes new content loads in.

$.address.change(function(event) {
    rand = Math.floor(Math.random()*1000);

    $('#content').empty().append('<div id="loading'+$rand+'"></div>');
    $('#loading'+$rand).empty().load(event.value, function(data) { /*callback*/ });
});

I am now adding a new div to my content div that has a random id and I load content into that new div. That way no load methods can overlap or be happening at the same time.

So far it works wonderfully. Do you see any reason that it might be a problem?

Answer 3

See this other entry for management of ajax requests:

http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery