Question

Hi I have this jQuery code:

$('#myid').click(function() {   

    var data = {
            action: 'xxx_ajax_response',
            xxx_ajax_response_nonce: the_ajax_script.xxx_ajax_response_nonce    
        };      
    //do an ajax request

    $.post(the_ajax_script.ajaxurl, data, function(response) {

        $(this).next().slideToggle();   

    });

    //return false;
});

How to temporarily disable click event when AJAX function is still executing/loading? But restore click after successful AJAX loading? I have tried with changing class but I’m using id selector and does not work. Is there an easy method? Thank you.

Answer 1

Just set a flag variable outside of the click callback function:

var _doing_ajax = false;
$('#myid').click(function() {   
    if ( _doing_ajax ) {
        return false;
    }
    var data = {
            action: 'xxx_ajax_response',
            xxx_ajax_response_nonce: the_ajax_script.xxx_ajax_response_nonce    
        };      

    _doing_ajax = true;
    //do an ajax request
    $.post(the_ajax_script.ajaxurl, data, function(response) {

        $(this).next().slideToggle();   
        _doing_ajax = false;
    });

    //return false;
});

Basically you define a new local variable, with default value set to false. At the beginning of the .click() callback function, you check the value of the flag variable – if it’s true, you return false. Just before starting the AJAX request, you set the variable to true. Once the AJAX call is completed, you set the variable to false again, so that any further clicks will enable the AJAX again.