AjaxSetup never execute the success function

Question

I have a simple registration page that validates if a user is already taken.

I use ajaxSetup for all my ajax calls and for some reason the "success" is never called. When I look at my console (firebug) I can see a successfully request (code 200 OK and I get true or false as the result).

Here's my code:

$('#checkValidUsername').click(function() {
    // some basic validation like not empty etc...
    $.ajax({
        type: "POST",
        url: '/checkuser.php',
        cache: false,
        data: $("#form").serialize(),
        dataType: 'json',
        success: function(result) {
            // do some actions
        },
    });
}

$.ajaxSetup({
    beforeSend: function() {
        // show loading dialog // works
    },
    complete: function(xhr, stat) {
        // hide dialog // works
    }
    success: function(result,status,xhr) {
        // not showing the alert
        alert('success');
    }
});

What is wrong with my code? Thank you

Answer 1

$('#checkValidUsername').click(function() {
    // some basic validation like not empty etc...
    $.ajax({
        type: "POST",
        url: '/checkuser.php',
        cache: false,
        data: $("#form").serialize(),
        dataType: 'json',
        success: function(result) {
            myAjaxSetup.success.apply(this, arguments);
            // do some actions
        },
    });
}

var myAjaxSetup = {
    beforeSend: function() {
        // show loading dialog // works
    },
    complete: function(xhr, stat) {
        // hide dialog // works
    }
    success: function(result,status,xhr) {
        // not showing the alert
        alert('success');
    }
};
$.ajaxSetup(myAjaxSetup);

each object function that you overwrite simply

myAjaxSetup.success.apply(this, arguments);

or

myAjaxSetup.error.apply(this, arguments);

or

myAjaxSetup.anyfunctionyouwant.apply(this, arguments);

Answer 2

because you are already using success in your $.ajax call

$('#checkValidUsername').click(function() {
    // some basic validation like not empty etc...
    $.ajax({
        type: "POST",
        url: '/checkuser.php',
        cache: false,
        data: $("#form").serialize(),
        dataType: 'json'
/*
        success: function(result) {
            // do some actions
        },
*/
    });
}

$.ajaxSetup({
    beforeSend: function() {
        // show loading dialog // works
    },
    complete: function(xhr, stat) {
        // hide dialog // works
    }
    success: function(result,status,xhr) {
        // not showing the alert
        alert('success');
    }
});

everything in $.ajax will override the $.ajaxSetup.

Answer 3

Remove the success handler inside $.ajax().

Answer 4

I think you are overriding it when you specify the success function in your ajax call. Try removing that and see if it calls the one from ajaxSetup.

Answer 5

$.ajaxSetup() is a means of providing pre-made, default settings that apply to all your future ajax() calls unless you override them in that specific ajax() call. When you define a success handler in both the ajaxSetup() call and also in the ajax() call itself, only one of those success handlers will get called.

So, if you want the success handler to get called from ajaxSetup(), then don't define one in the ajax() call. If you define one in the ajax() call, then the one from ajaxSetup() won't get called.

Answer 6

You may use Global Ajax Event Handlers

$(document).ajaxSuccess(function() {
  $( ".log" ).text( "Triggered ajaxSuccess handler." );
});