Question

I would like to change the text on my buttons (which are actually divs) to “Working” when an ajax request is processing. I’d also like to disable them from being clicked again until the ajax process is over. When it is, I’d like to enable the button and change the text back to “Save”.

I was thinking of using the JQuery .ajaxStart() and .ajaxStop() global events to handle this. Something like this:

$(document).ajaxStart(function () {
    $('#btnSave').each(function() {
        $(this).data('eventsbackup', $(this).data('events'));
        $(this).data('events', null);
        $(this).html('Working...');
    });
});

$(document).ajaxStop(function() {
    $('#btnSave').each(function () {
        $(this).html('Save');
        $(this).data('events', $(this).data('eventsbackup'));
        $(this).data('eventsbackup', null);
    });
});

Do you see anything wrong with this approach? I’m a little worried about setting .data(‘event’) to null instead of using unbind(), but I can’t be sure how many events are bound to the buttons. Could this approach cause problems?

Answer 1

I see one big problem, you’re using ID’s rather than classes so only the FIRST button will likely be affected.

Change the buttons to use classes and then your jQuery to $(".buttons").each()

As for enabling/disabling buttons why not use a is-disabled data attribute on your buttons and test for it inside your click functions. Something like this

<a href="#" id="get-files" class="button">Get Files</a>
<a href="#" id="get-folders" class="button">Get Folders</a>

Sample click code

$("#get-files").click(function(e) {
    var isDisabled = $(this).data("is-disabled");
    if(!isDisabled) {
        // run Ajax Code
    }
}); // Do the same for #get-folders, even better wrap it in a reusable function

Then with your existing code just do

$(document).ajaxStart(function () {
    $('.button').each(function() {
        $(this).data("is-disabled", true);
        $(this).html('Working...');
    });
});

$(document).ajaxStop(function() {
    $('.button').each(function () {
        $(this).html('Save');
        $(this).data("is-disabled", false);
    });
});