Aborting jQuery().load()

The .load() function of the jQuery library allows you to selectively load elements from another page (subject to certain rules). I would like to know whether it is possible to abort the load process.

In our application, a user can browse a list of items. They may choose to click a button which loads and displays additional information about an item from another document (which can take some time). If they choose a different item in the list whilst a .load() is still happening, I would like the loading to be aborted.

Is this possible? Is it even worth it? Any ideas?

Dan

You can't do this with .load() directly, since it returns the jQuery object for chaining, but if you change to the full $.ajax() call with .html() you can, like this:

var xhr = $.ajax({
            url: 'mypage.htm',
            success: function(data) {
              $("#myElement").html(data);
            }
          });
//if needed, abort the request later..
xhr.abort();

This uses the .abort() method on the XMLHttpRequest object to abort the load.

Nick's answer was almost what I needed, but not quite. I was using .load() to load only an image from a page. So, expanding on Nick's answer...

So instead of...

$('#myElement').load('mypage.htm #myImage');

I'm now using...

var xhr = $.ajax({
            url: 'mypage.htm',
            success: function(data) {
              $("#myElement").html($(data).find("#myImage"));
            }
          });
//if needed, abort the request later..
xhr.abort();

You can do this by using jQuery.ajax manually. It will return a XMLHttpRequest object, which you can call abort on as needed. In the success handler, you can use jQuery.html

$("#myElement").load("/mypage #mayImage", function(response, status, xhr) {
  if (status == "error") {
     xhr.abort();
  }
});

Should work like this ..

or on a another event, I send a verification on a long field, the user change the content, I want to stop the previous check to re-check:

xhr.abort();

$("#myElement").load("/mypage #mayImage", function(response, status, xhr) {
  if (status == "error") {
    xhr.abort();
  }
});