locking save button for some time

Question

hi, i am using php,mysql,jquery.

When a user clicks on save i go to back end and save data and show the response. once show the success i need to disable the save button for say 1 min. how do i do it.?

here is ma code

$(document).ready(function() {

 if ($.cookie('<?php echo $userId ?><?php echo $product ?><?php echo $alias ?>agreedisabledTime') > 0) {


    var remainingTime = (new Date()).getTime() - $.cookie('<?php echo $userId ?><?php echo $product ?><?php echo $alias ?>agreedisabledTime');


 if (remainingTime < <?php echo $timer ?>) {
  //if (remainingTime < 7200) {
       $('#agree').attr('disabled', 'disabled');
       $('#disagree').attr('disabled', 'disabled');
       setTimeout(function() { $('#agree').attr('disabled', ''); }, remainingTime);
       setTimeout(function() { $('#disagree').attr('disabled', ''); }, remainingTime);

    }
  }

$('#agree').click(function()
{
$('#response').show();
$.post('/all_include_files/increment.php',{update:'agree',product:"<?php echo $product?>",alias:"<?php echo $alias ?>"},function(data)
{
if(data.indexOf('ERROR') < 0)
{
$('#response').hide();
$('.agree_number').html(data);
alert('Thanks for your esteemed opinion');
 $('#agree').attr('disabled', 'disabled');
 $('#disagree').attr('disabled', 'disabled');

setTimeout(function() { $('#agree').attr('disabled', ''); }, "<?php echo $timer ?>");
setTimeout(function() { $('#disagree').attr('disabled', ''); }, "<?php echo $timer ?>");

$.cookie('<?php echo $userId ?><?php echo $product ?><?php echo $alias ?>agreedisabledTime', (new Date()).getTime());
}
else
{ alert(data); }
});

});

});

where $timer is set to 120000

Answer 1

Disable button for 1 second:

if (success) {
 $('#buttonid').attr('disabled', 'disabled');
 setTimeout(function() { $('#buttonid').attr('disabled', ''); }, 1000);
}

EDIT about keeping track of browser reloads
You can easily access cookies with the jQuery plugin: http://plugins.jquery.com/project/cookie

if (success) {
 $('#buttonid').attr('disabled', 'disabled');
 setTimeout(function() { $('#buttonid').attr('disabled', ''); }, 1000);
 $.cookie('disabledTime', (new Date()).getTime());
}

Then read it upon loading the DOM:

$(document).ready(function() {
  if ($.cookie('disabledTime') > 0) {
    var remainingTime = (new Date()).getTime() - $.cookie('disabledTime');
    if (remainingTime > 0) {
       $('#buttonid').attr('disabled', 'disabled');
       setTimeout(function() { $('#buttonid').attr('disabled', ''); }, remainingTime);
    }
  }
});

Note that I didn't test this, but you get the idea

Answer 2

Instead of disabling it for a period of time, I would use the callback on completion of the command to enable the button, and disable it once you start the command. I would also remember to enable it if an error occurred, with an error popup to the user that it failed and that repeated failures are likely to imply the system is offline or has an error.