jquery ajax ignores 500 status error

Question

I'm making some GET requests to an App Engine app, testing in Chrome. Whilst I can see in javascript console that some calls result in a 500 server error, I can't seem to find anyway of capturing this error in my jQuery code despite reading a number of similar SO threads. I understand that it indicates a server side error, but I'd still like to be able to capture such an error from my javascript.

I need to capture the error so that I can count the number of responses (successful or otherwise) and trigger another function when all call responses have been received.

Chrome console output:

GET http://myapp.com/api?callback=jQuery12345&params=restOfParams 500 (Internal Server Error)

My call:

  function makeCall() {
    var count = 0;
    var alldata = $('#inputset').val();
    var rows = alldata.split('\n');
    var countmatch = rows.length;
    for (i=0;i<rows.length;i++) {
      data["param"] = rows[i]["val"];
      $.ajax({
              url: apiUrl,
              type: 'GET',
              data: data,
              dataType: 'jsonp',
              error: function(){
                  alert('Error loading document');
                  count +=1;
              },
              success: function(responseJson) {
                            count +=1;
                            var res = responseJson.results;
                            if (count == countmatch) {
                              allDoneCallback(res);
                            }
                        },
             });
    }
}

I've tried some of the following:
Adding:

statusCode: {500: function() {alert('err');}}

to the call.

Using:

  $().ready(function(){
     $.ajaxSetup({
       error:function(x,e) {
             if(x.status==500) {
               alert('Internel Server Error.');
             }
           }
      });
   });

Would anyone have a suggestion regarding how I could catch the 500 response?

Thanks Oli

UPDATE:

Based on responses, my jquery code appears to be correct, but for some reason it would only catch certain 500 responses received from my app. This is possibly a problem with how App Engine returns the error(I don't know a lot about this), or how jquery handles errors with jsonp - this point is briefly discussed in the last paragraph of this article.

I got this to work by using jquery-isonp which caught all of the 500 status's thrown by the app.

Answer 1

It doesn't look like you're using jQuery's document.ready binding correctly. The $().ready(...) version is more-or-less deprecated. Try one of these instead:

$(document).ready(function() {
    $.ajaxSetup({
        error: function(x, e) {
            if (x.status == 500) {
                alert('Internel Server Error.');
            }
        }
    });
});

or the shorthand:

$(function() {
    $.ajaxSetup({
        error: function(x, e) {
            if (x.status == 500) {
                alert('Internel Server Error.');
            }
        }
    });
});

Answer 2

Solved the problem by upgrading jQuery from 1.9.1 to 2.1.1 — now it started calling .error() right on the server response (before it would ignore the 500 response and wait until timeout is over).

Limitation: jQuery 2.1.1 does not support IE8 and below (as IMO shouldn't you)