jquery ajax done function not firing

Question

I have a VERY simple jQuery Ajax call (below). The Ajax call executes and I can see in the Firebug Net panel that the server returned 200 OK and returned a string "OK" as it should. However, the done and fail functions do not fire! Very frustrating!

(The "before" and "after" alerts DO fire. )

For simplicity (and as a debugging technique) I have stripped this down to it's most bare skeleton but still the handlers won't fire. What am I not seeing here?

postUrl= "/mod/users/check_email/";
dataToPost= { email: "[email protected]" };

alert("before");
$.ajax
({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
    done: function() 
    {
        alert("Success.");
    },
    fail: function() 
    {
        alert("Sorry. Server unavailable. ");
    },
});  // end Ajax call 

alert("after");

Answer 1

You need to chain the done() and fail() functions, they are not part of the options object used in $.ajax :

$.ajax({
    type: "POST", 
    url : postUrl,
    data: dataToPost
}).done(function()  {
    alert("Success.");
}).fail(function()  {
    alert("Sorry. Server unavailable. ");
}); 

Also, as ajax is asynchronous, don't be suprised if the "after" alert comes before the "success" alert.

Answer 2

success and error callbacks can be used in that way. For done and fail, you need to do :

$.ajax({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
}).done(function() {
    alert("Success.");
}).fail(function() {
    alert("Sorry. Server unavailable. ");
});

Or :

$.ajax({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
    success: function() {
            //code here
    }
});