Jquery automatic loading gif and button disable on submit click

Posted by JK on Stack Overflow See other posts from Stack Overflow or by JK
Published on 2010-05-20T23:11:35Z Indexed on 2010/05/20 23:20 UTC
Read the original article Hit count: 229

Filed under:
|
|

Is it possible to automate the showing/hiding of a ajax loading gif, and the disabling/enabling of the submit button at the same time? (when the submit button is a styled not a input type=submit)

Currently when submitting I do this:

$("#save_button_id").click(function () {
        if ($('#save_button_id').hasClass('ui-state-disabled')) return false;
        Save();
});

function Save() {
StartAjax($("#save_button_id"));
$.ajax({
        success: function (data) {
            EndAjax($("#save_button_id"));
            // etc...
        },
        error: function (xhr, status, error) {
            EndAjax($("#save_button_id"));
            // etc ...
        }
});
}

function StartAjax(button) {
    DisableButtonClick(button);
    $("#ajaxLoad").show();
}

function EndAjax(button) {
    EnableButtonClick(button);
    $("#ajaxLoad").hide();
}

I've seen a few places talk about how to use .ajaxStart() to automatically show the loading gif, but is it possible to also find a reference to the button (a styled tag) that was clicked, and automatically disable/enable that as well?

The point of this is to not have to manually type in Start/EndAjax every time, and to make sure the app is consistent everywhere.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ajax