I want to make a count down timer on a two different buttons which will be permanently disabled after 5 minutes even on refresh it will remain disabled. How can i make it in javascript or jquery or ajax ? I just cant seem to make it for my code.Cancel button should be disabled in 5 minutes on load here
<table cellspacing="0" cellpadding="0" border="0" class="tbl_repeat">
<tr>
<th>Table No</th>
<th class="ta_r">Date</th>
<th class="ta_r col_15">Status</th>
<th class="ta_r col_15">Total</th>
</tr>
<tr>
<td><?php echo $row['Table_id']; ?></td>
<td class="ta_r"><?php echo Helper::setDate(1, $row['date']); ?></td>
<td class="ta_r">
<?php
$status = $objOrder->getStatus($row['status']);
echo $status['name'];
?>
</td>
<td class="ta_r">
₨<?php echo number_format($row['subtotal'], 2); ?>
</td>
</tr>
<th class="ta_r col_15">Cancel Order</th>
<th class="ta_r col_15">Order Timer</th>
<tr>
<td>
<a href="/pages/delshow/delete.php?delete_id=<?php echo $row['id'];?>" id='abcd'>
<button class="acount-btn" id="abcd">Cancel</button>
</a>
</td>
<td>
<a href="pages/countdown.php?timer=<?php echo $row['response'];?>" ><img src="pages/order-images/clock-circle.png"/>
</a>
</td>
</tr>
<br/><br/><br/>
<?php }
else
{
}
}
?>
</table>
Use setTimeout, explained here to set a timer on the element.
function disableElement(){
$('#elementId').prop('disabled', true);
}
setTimeout(disableElement, 5*60*1000);
However, to solve the "persist on refresh" part, you could store the status change details on the server side or use localStorage or $.cookie. according to your application requirement.
Working Implementation based on localStorage:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.js"
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var limit = 5*60*1000; // the time limit (in milliseconds) for the disable function
var timer = setTimeout(disableMyButton, limit);
function disableMyButton(){
$('#myButton').prop('disabled', true);
$("#statusMsg").text("Disabling before page refresh");
localStorage.setItem("isMyButtonDisabled", "true");
}
if(localStorage.getItem("isMyButtonDisabled") == "true"){
$("#statusMsg").text("Disabling after page refresh");
$('#myButton').prop('disabled', true);
window.clearTimeout(timer);
}
});
</script>
</head>
<input type = "button" id= "myButton" value= "Click me" />
<p id="statusMsg" > </p>
</html>
Note:
As mentioned in this page, we need to declare the timer variable as a global variable for the clearTimeout to work properly.
Building upon Sarath's good answer (+1) . . .
Since you've tagged your question with PHP and AJAX, you can also do this using a PHP $_SESSION variable.
PHP $_SESSION variables are stored on the server and are specific to one visitor (a cookie is stored on the visitor's computer that matches up with a variable on the server, which creates an individualized, persistent, SESSION).
AJAX:
var timerOn = true;
$(function(){ //same as $(document).ready(function(){
checkDisabledElement();
if (timerOn) var timerDisableElement = setTimeout(disableElement, 5*60*1000);
});
function checkDisabledElement(){
//This check can be done in PHP while building the page, but for educational purposes let's do it here
$.ajax({
type: 'post',
url: 'ajax.php',
data: 'request=is_button_disabled',
success: function(d){
if (d = 1){
$('#elementId').prop('disabled', true);
timerOn = false;
}else{
}
}
});
}
function disableElement(){
$.ajax({
type: 'post',
url: 'ajax.php',
data: 'request=disable_button',
success: function(d){
if (d = 1){
$('#elementId').prop('disabled', true);
timerOn = false;
clearTimeout(disableTimer);
}
}
});
}
ajax.php
<?php
session_start(); //must be first instruction in PHP
if ($_POST['request'] == 'is_button_disabled'){
if (isset($_SESSION['button_state']) && $_SESSION['button_state']=='disabled') echo 1;
}else if ($_POST['request'] == 'disable_button'){
$_SESSION['button_state'] = "disabled";
echo 1;
}
Important Note: SESSION variables do not persist forever. Once the browser is closed, that session vanishes. To preserve sessions "forever" (or at least through bouncing the browser) use a MySQL table. What do you store in the MySQL database? You could store the visitor's IP, but that is not foolproof as they tend to change over time... but you are now very close to having a user login system.
Note that there are similar issues with using localstorage. This post might be helpful:
When is localStorage cleared?
I would start by storing the time at which you are going to disable the buttons in the local storage, set the timer and check that time on subsequent reloads.
var disableElement = function(){
// Whatever you wanted to do on the timeout
$('#elementId').prop('disabled', true);
};
$(document).ready(function(){
if ( localStorage.getItem("disableTime") ) {
var currentTime = new Date(),
disableTime = new Date(localStorage.getItem("disableTime");
if ( currentTime.getTime() < disableTime.getTime() ) {
window.setTimeout(disableElement, disableTime.getTime() - currentTime.getTime());
} else {
disableElement();
}
} else {
var disableTime = new Date(),
minutes = 5*60*1000;
localStorage.setItem("disableTime", new Date().getTime() + minutes);
window.setTimeout(disableElement, minutes);
}
})
