jQuery Ajax 404 Handling

Question

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 ?.

Answer 1

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

Answer 2

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

Answer 3

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!

Answer 4

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

Answer 5

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

Answer 6

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