How to override the jQuery.ajax success function after it has been initialized?

Question

A button click triggers an ajax request. When the user clicks the button a second time while the first request is still loading, i want to override the first request's success function with another one.

Basically I want to do this:

var ajaxRequest = null;

jQuery('#mybutton').click(function () {
    if (ajaxRequest) {
        ajaxRequest.success = function () {
        };
    }

    ajaxRequest = jQuery.ajax({
        url: '...',
        success: function () {
            console.debug('do something');
        }
    });
});

But the initial success handler is been called. How to achieve an override?

Answer 1

You can try the following hack, I have tested it with asynch setTimeout (instead of asynch jQuery.ajax) and it works -

var mySuccessHander = function() {
    console.debug('Initial function');
}

var test = jQuery.ajax({
    url: '...',
    success: function() {
        mySuccessHander();
    }
});

And when the button is clicked for the second time, execute following -

mySuccessHander = function() {
    console.debug('Overridden function');
}

Answer 2

You can set the ajax arguments to a variable first so you can modify it later on.

var clicks = 0,
    ajaxArgs = {
        url: '...',
        success: function () {
            console.debug('do something');
        }
    };


$('#myButton').click(function() {
    ++clicks; 
    if (clicks > 1) {
        // set the success function if clicked more than once
        ajaxArgs.success = function () {
            console.debug('Success function ' + clicks);
        }
    }

    $.ajax(ajaxArgs);
});

If you want to modify the success function only when ajax is still loading you can do this:

var loading = false,
    ajaxArgs = {
        url: '...',
        success: function () {
            console.debug('do something');
        }, complete: function () {
            loading = false;
        }
    };

$('#myButton').click(function() {
    if (loading) {
        // set the success function if ajax is still loading
        ajaxArgs.success = function () {
            console.debug('Another Success function ');
        }
    } else {
        loading = true;
        $.ajax(ajaxArgs);
    }
});

Answer 3

Nice question , this will work..

var isRequestDone = true;

jQuery('#mybutton').click(function () {
    var requestParams = {
        url: '....',
        beforeSend: function () {
            isRequestDone = false;
        },
        success: function () {
            isRequestDone = true;
            console.debug('do something');
        },
        error: function () {
            isRequestDone = true;
        }
    }
    if (!isRequestDone) {
        requestParams.success = function () {
            console.log('please wait for a while!'); 
        };
    }

    jQuery.ajax(requestParams);
});

beforeSend will fire just before the request will go to server , so when request in on the server isRequestDone will be false and hence will change success handler . on success callback from the first request it will again back to original.