27

Im trying to access a 404 event which I can see coming back as 404 with firebug but the error function is not kicking in, With my below code I always get Error: success ?.

ie.

$.ajax({
    type: 'get',
    url: 'url: 'https://admin.instantservice.com/resources/smartbutton/5702/10945/available.gif?' + Math.floor(Math.random()*10001),
    success: function(data, textStatus, XMLHttpRequest){
        console.log('Error: ' + textStatus);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
        alert(xhr.statusText);
        alert(xhr.responseText);
    }
});

Again I know 1000% that im getting 404 Not Found in firebug it never triggers the error.

Am I missing something ?

iwasrobbed
  • 46,496
  • 21
  • 150
  • 195
Lee
  • 20,034
  • 23
  • 75
  • 102
  • I tested that exact same code and got the 3 error alerts correctly (first was `404`).. – cambraca Nov 25 '10 at 22:34
  • Are you sure that you actually get a response with the status code 404, and not just a regular response with status code 200 and a page that contains text that says that it's a 404? – Guffa Nov 25 '10 at 22:40
  • @cambraca Same over here. Tested with Firefox 3.6.12 and Firebug. – aefxx Nov 25 '10 at 22:41
  • next time use `console.log()` for debugging. It saves the javascript locking up and is less obtrusive. It comes up in your javascript console. – Fred Nov 25 '10 at 22:45
  • Now I have enter the URL I am actually trying. Please try now – Lee Nov 25 '10 at 22:51

6 Answers6

24

Cross Site requests, JSONP, wont trigger the error calls. Just had the same problem myself: http://forum.jquery.com/topic/jquery-ajax-with-datatype-jsonp-will-not-use-error-callback-if-request-fails

firecall
  • 753
  • 1
  • 8
  • 22
14

What you can also do is use the $.ajaxError function, like so

$("#message").ajaxError(function (event, request, settings) {
    $(this).show();
    $(this).append("<li>Error requesting page " + settings.url + "</li>");
});
Wang Liang
  • 4,244
  • 6
  • 22
  • 45
Fergal Moran
  • 4,525
  • 5
  • 39
  • 54
  • 3
    Not sure why this doesn't have more upvotes, works perfect see: http://api.jquery.com/ajaxError/ – cnizzardini Feb 28 '13 at 22:38
  • Thanks @systematical - not sure myself, works great for me, I have it in the boilerplate for all my sites. – Fergal Moran Mar 01 '13 at 11:42
  • 7
    The reason this was not helpful for me was because it still does not get called in the case of JSONP. From http://api.jquery.com/ajaxError/: "Note: This handler is not called for cross-domain script and cross-domain JSONP requests." – jacobq May 22 '13 at 19:22
1

I had a very similar result/problem. The bottom line is that I failed to make sure that my URL did not contain any of the same param names in the data section of the ajax function.

The reason for me, was that I generated the URL with php code to get a url

pines_url('com_referral', 'sendhttprequest')

which outputs to a url with a parameter

option=com_referral

and a parameter

action=sendhttprequest

My BIG problem was that I was also trying to send a param "action" in the data section of an AJAX function. 

data: {"action": "getpoints"}

So the second action was overriding it "getpoints" does not exist, but the tricky part is that firebug would obviously not tell me the url with getpoints, it would tell me the url as sendhttprequest.

Hope that wasn't confusing, but I also hope this helps someone else with a similar problem!

amurrell
  • 2,383
  • 22
  • 26
1

Adding a timeout value will cause the error callback to run if there is no response in the specified time. With a callback of 5000, if the jsonp request doesn't respond in 5 seconds (i.e. it 404s) then the error callback will run.

$.ajax({
    type: 'get',
    timeout: 5000,
    url: 'url: 'https://admin.instantservice.com/resources/smartbutton/5702/10945/available.gif?' + Math.floor(Math.random()*10001),
    success: function(data, textStatus, XMLHttpRequest){
        console.log('Error: ' + textStatus);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
        alert(xhr.statusText);
        alert(xhr.responseText);
    }
});
uberweb
  • 325
  • 1
  • 4
  • 12
  • 1
    This assumes a 404 takes at least 5 seconds to be served? – ficuscr Sep 04 '14 at 20:12
  • Yes, 5 seconds is a fairly aggressive default. If you're connecting to a slow server you could go up to 30 seconds but at the detriment of user experience. – uberweb Sep 09 '14 at 01:27
0

I don't know exactly why, but if you use the chaining .fail method, the error is correctly captured even if it is a different site:

$.ajax({
    type: 'get',
    url: 'http://example.com',
    success: function(data, textStatus, XMLHttpRequest){
        console.log('Error: ' + textStatus);
      }
    }).fail(function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(xhr.statusText);
        alert(xhr.responseText);
    });
neves
  • 33,186
  • 27
  • 159
  • 192
  • I just tried this out, fail method will NOT be executed if the call is cross site request and gets 404. – WoodyDRN Apr 08 '20 at 14:07
0

Remove 'url: ' in your code

Your code :

$.ajax({
    type: 'get',
    url: 'url: 'https://admin.instantservice.com/resources/smartbutton/5702/10945/available.gif?' + Math.floor(Math.random()*10001),
    success: function(data, textStatus, XMLHttpRequest){
        console.log('Error: ' + textStatus);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
        alert(xhr.statusText);
        alert(xhr.responseText);
    }
});

Correct code :

$.ajax({
    type: 'get',
    url: 'https://admin.instantservice.com/resources/smartbutton/5702/10945/available.gif?' + Math.floor(Math.random()*10001),
    success: function(data, textStatus, XMLHttpRequest){
        console.log('Error: ' + textStatus);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
        alert(xhr.statusText);
        alert(xhr.responseText);
    }
});
Among Amrul
  • 157
  • 1
  • 4