Question

I need a div to be disabled (so that it no longer receives click) on start of an Ajax request and re-enable it on Ajax complete. I also want a loading gif to be shown during the process. I think that this could be accomplished using ajaxStart and ajaxStop. But, if I am correct these would fire for any Ajax request that start or stops. Here comes the problem. I have multiple div’s on a page and anyone of these could trigger an Ajax request. How can I disable/enable the “specific div” that was clicked and how can I display/hide it’s corresponding loading gif either using ajaxStart, ajaxStop or any other method. Please note that if this involves binding/unbinding of click event then the method suggested needs to maintain compatibility with jQuery on().

The HTML looks like this:

<div class="button white"><img src="loading.gif" /></div>
<div class="button white"><img src="loading.gif" /></div>
<div class="button white"><img src="loading.gif" /></div>

The Javascript for Ajax looks like this:

$('body').on('click', '.button', function(e){
e.preventDefault();

    $.ajax({
        url     : ajaxVars.ajaxurl,
        context : this,
        type    :'POST',
        async   : true,
        cache   : false,
        timeout : 1000,
        data    : { action : 'test_action' },
        success : function(response) {
            if (response == 1) {
                $(this).toggleClass('white').toggleClass('green');
            }
        },
        error   : function() {
            alert(error);
        }
   });
});

Regards, John

Answer 1

to disable button, simply change current class button.

you can use this:

$('body').on('click', '.button', function(e){
e.preventDefault();

$(this).removeClass('button').addClass('disabledbutton');

$.ajax({
    url     : ajaxVars.ajaxurl,
    context : this,
    type    :'POST',
    async   : true,
    cache   : false,
    timeout : 1000,
    data    : { action : 'test_action' },
    success : function(response) {
        if (response == 1) {
            $(this).toggleClass('white').toggleClass('green');
            $(this).removeClass('disabledbutton').addClass('button');
        }
    },
    error   : function() {
        alert(error);
    }

   });
});