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"); } });}