jQuery ajaxsetup not working

Question

I need a 'loading' icon that displays during an Ajax call. I'm trying this: How to show loading spinner in jQuery?

It fails to work. I am not making Ajax calls directly in my code, this is a large app with lots of abstraction and wrappers, so typically I am calling functions that call functions that call $.ajax(), and that call already has beforeSend and success attributes set -- that function is used dozens of times throughout our code and I prefer not to modify it.

Is ajaxSetup() not designed to work in such a situation? If so, then under what circumstances is it supposed to work? Thanks.

Answer 1

I'm using this aswell, I call a lot of Ajax functions, and want a loader to show. If you use the code below, the original success function is saved and then removed from the settings because we want to hide our dialog on the success. Then within this success function, we call our saved success function that was added to our settings (which was removed).

// Backup original ajax, which is used at the bottom
var _ajax = $.ajax;

// Now overwrite it with our own function
$.ajax = function (properties) {

    // Save the original success function
    var successFunction = properties.success;
    delete properties.success;

    var _error = $.noop;
    // Save error function
    if (properties.error) {
        _error = properties.error;
        delete properties.error;
    }

    // TODO :: OPEN YOUR LOADER HERE

    // Default settings
    var settings = {
        url: "ajax.html",
        data: data,
        async: true,
        success: function (response) {

            // TODO :: CLOSE YOUR LOADER HERE

            successFunction.call(this, response);
        },
        error: function (xhr, textStatus, thrownError) {
            // TODO :: CLOSE YOUR LOADER HERE

            // Call error
            _error.call(xhr, textStatus, thrownError);
        }
    };

    // Extend with own properties
    $.extend(settings, properties);

    // Do the request
    _ajax(settings);
};