Jquery disable link for 5 seconds Jquery disable link for 5 seconds ajax ajax

Jquery disable link for 5 seconds


If "#page-refresh" is really a button (a button or input type="button" element), you can use its disabled property and then set a timeout to restore it:

$('#page-refresh').click( function() {    var refreshButton = this;    $.ajax({        url: "/page1.php",        cache: false,        dataType: "html",        success: function(data) {            $('#pagelist').html(data);            refreshButton.disabled = true;            setTimeout(function() {                refreshButton.disabled = false;            }, 5000);        }    });    return false;});

If it's not really a button, you can simulate the disabled property. I'll do it with a class here so you can show the disabled state for the user via CSS:

$('#page-refresh').click( function() {    var $refreshButton = $(this);    if (!$refreshButton.hasClass('disabled')) {        $.ajax({            url: "/page1.php",            cache: false,            dataType: "html",            success: function(data) {                $('#pagelist').html(data);                $refreshButton.addClass('disabled');                setTimeout(function() {                    $refreshButton.removeClass('disabled');                }, 5000);            }        });        return false;    });

Note that in the first case, I'm keeping a reference to the DOM element (var refreshButton = this;), but in the second case I'm keeping a reference to a jQuery wrapper around it (var $refreshButton = $(this);). That's just because jQuery makes it easy to test/add/remove class names. In both cases, that reference is released once the closures in your event handler are released (in the above, that's five seconds after the ajax call completes).


You said specifically you wanted to disable it after the ajax call is complete, but as Marcus points out below, you probably want to disable it when starting the ajax call. Just move the disabling bit up a bit, and add an error handler for the case where success doesn't get called (error handlers are usually a good idea in any case):

Real button:

$('#page-refresh').click( function() {    var refreshButton = this;    refreshButton.disabled = true;             // <== Moved    $.ajax({        url: "/page1.php",        cache: false,        dataType: "html",        success: function(data) {            $('#pagelist').html(data);            setTimeout(function() {                refreshButton.disabled = false;            }, 5000);        },        error: function() {                    // <== Added            refreshButton.disabled = false;        }    });    return false;});

Simulated via 'disabled' class:

$('#page-refresh').click( function() {    var $refreshButton = $(this);    if (!$refreshButton.hasClass('disabled')) {        $refreshButton.addClass('disabled');   // <== Moved        $.ajax({            url: "/page1.php",            cache: false,            dataType: "html",            success: function(data) {                $('#pagelist').html(data);                setTimeout(function() {                    $refreshButton.removeClass('disabled');                }, 5000);            },            error: function() {                // <== Added                $refreshButton.removeClass('disabled');            }        });        return false;    });


Just do this:

$('#page-refresh').click( function() {    var btn = $(this);    // disable button    btn.attr('disabled', 'disabled');    $.ajax({         url: "/page1.php",         cache: false,         dataType: "html",         success: function(data) {             $('#pagelist').html(data);             // set timer to re-enable button after 5 seconds (or 5000 milliseconds)             window.setTimeout(function(){                 btn.removeAttr('disabled');             }, 5000);         }     });     return false;});


A generic solution to disable a button for 5 seconds:

$(document).ready(function() {   $(".btn").click(function()   {                   var lMilisNow= (new Date()).getTime();       this.disabled=true;        this.setAttribute("data-one-click", lMilisNow);         setTimeout("oneClickTimeout()",5100);    }); }function oneClickTimeout(){    $(".btn[data-one-click]").each(function()    {          var lMilisNow= (new Date()).getTime();         var lMilisAtt= this.getAttribute("data-one-click");         lMilisAtt= lMilisAtt==null? 0: lMilisAtt;         if (lMilisNow-lMilisAtt >= 5000 )         {             this.disabled=false;              this.removeAttribute("data-one-click");          }     });}