How to catch error in jQuery's load() method

Question

I'm using jQuery's .load() method to retrieve some data when a user clicks on a button.

After the load successfully finishes, I show the result in a <div>.

The problem is, sometimes an error occurs in load() while retrieving the data.

How can I catch an error in load()?

This question is from 2009, so please note from [$.load](http://api.jquery.com/load/): _Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of arguments passed to it._ — colm.anseo, Jan 23 '19 at 19:02

cgp · Answer 1 · 2009-04-16T02:24:09.597

91

load() documentation.

Just a little background on how a load error happens...

$("body").load("/someotherpath/feedsx.pxhp", {limit: 25}, 
    function (responseText, textStatus, req) {
        if (textStatus == "error") {
          return "oh noes!!!!";
        }
});

Edit: Added a path other than the root path as requested by comments.

edited Apr 16 '09 at 02:24

answered Apr 15 '09 at 19:35

cgp

41,026
12
101
131

thanks altCongnito.it is work! btw,can i ask another related question? another problem is file path! I use asp.net. i write load() code in Master page. parameter Url is like feedsx.aspx. it is work when content pages are under root folder.but if content pages are under other subfolder not work. help – Apr 16 '09 at 02:01
thanks for the link to the jquery docs. I didn't know they even existed! – David Dombrowsky Feb 26 '10 at 17:51
Thanks - load failures are mostly due to a problem when loading the target page. – Resh32 Sep 13 '12 at 15:33

score 13 · Answer 2 · answered Apr 15 '09 at 19:34

13

Besides passing a callback to the load() function as Ólafur Waage suggests, you can also register "global" error handlers (global as in global for all ajax calls on the page).

There are at least two ways to register global Ajax error handlers :

Register just the error handler with ajaxError():

$.ajaxError(function(event, request, settings) {
      alert("Oops!!");
});

Or, use ajaxSetup() to set up an error handler and other properties at the same time:

$.ajaxSetup({
    timeout: 5000,
    error: function(event, request, settings){
        alert("Oops!");
    }
});

answered Apr 15 '09 at 19:34

matt b

138,234
66
282
345

i'm using jquery 3.5, and it has no `$.ajaxError` function, although it's still in documentation: https://api.jquery.com/ajaxError/ – Dee Feb 14 '21 at 08:07
As of jQuery 1.9, it's `$(document).ajaxError` instead of just `$.ajaxError` – Dee Feb 14 '21 at 08:09

score 6 · Answer 3 · answered Apr 15 '09 at 19:27

6

load() offers a callback.

Callback.
The function called when the ajax request is complete (not necessarily success).

This is how its done IIRC. (haven't tested it)

$("#feeds").load("feeds.php", {limit: 25}, 
    function (responseText, textStatus, XMLHttpRequest) {
        // XMLHttpRequest.responseText has the error info you want.
        alert(XMLHttpRequest.responseText);
});

answered Apr 15 '09 at 19:27

Ólafur Waage

68,817
22
142
198

8

The first argument of the function IS responseText. No need to use XMLHttpRequest.responseText... – Enrico Detoma Jul 14 '11 at 08:39

score 0 · Answer 4 · answered Apr 15 '09 at 19:37

Electric toolbox has an article called "Loading content with jQuery AJAX and dealing with failures" that appears to answer your question.

Apparently the callback function that you specify gets passed the response, status, and XmlHttpRequest object, allowing you to determine the status of your ajax request and handle the condition accordingly.

How to catch error in jQuery's load() method

4 Answers4

Linked