Aborting jQuery().load()

Question

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

Solution 1

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.

Solution 2

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();

Solution 3

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

Solution 4

$("#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();
  }
});

View more solutions

Comments

[justcode]

this doesnt work for me...I think the problem is the .find...are there other options I can explore to grab a specific div...without using .load

[Homer]

does the $.ajax return data for you?

[justcode]

yea it does if I simply do $("#myElement").html(data)...but when I add the .find...nothing is returned and I'm sure the call was successful.

[Homer]

It sounds like the HTML returned doesn't have the element you are looking for. data should contain the HTML of mypage.htm. $(data).find("#myImage") is searching that HTML for the element with the id myImage.

[justcode]

I dumped (data) to screen and it contains the page I need...but the .find seems unable to find the id in the page. I have $("#google_books_result").html($(data).find("#google_books_r‌​esp")); and the div is <div id="google_books_resp">something</div>