Jquery automatic loading gif and button disable on submit click
- by JK
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.
