Сделайте таймер обратного отсчета кнопки, который будет постоянно отключен через 5 минут, даже при обновлении страницы, он должен оставаться отключенным.

Я хочу сделать таймер обратного отсчета на двух разных кнопках, которые будут навсегда отключены через 5 минут, даже при обновлении он останется отключенным. Как я могу сделать это в javascript, jquery или ajax? Я просто не могу сделать это для своего кода. Кнопка «Отмена» должна быть отключена через 5 минут при загрузке здесь.

<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">
                &#8360;<?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>

javascript php timer jquery ajax
person haroon sheikh    schedule 07.05.2016    source источник
comment
Вам необходимо сохранить состояние таймера на сервере, чтобы оно сохранялось при обновлении страницы. Вы не можете сделать это только с помощью javascript.   -  person Sergio Tulentsev    schedule 08.05.2016
comment
Относится к 1. stackoverflow.com/q/31671918/2869791 2. stackoverflow.com/q/18959919/2869791   -  person Sarath Chandra    schedule 08.05.2016

Ответы (3)


arrow_upward
2
arrow_downward

Используйте setTimeout, описанный здесь, чтобы установить таймер элемент.

function disableElement(){
  $('#elementId').prop('disabled', true);
}

setTimeout(disableElement, 5*60*1000);

Однако, чтобы решить проблему «сохранения при обновлении», вы можете сохранить информацию об изменении статуса на стороне сервера или использовать localStorage или $.cookie. в соответствии с требованиями вашего приложения.

Рабочая реализация на базе 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>

Примечание:

Как упоминалось на этой странице, нам нужно объявить переменную timer глобальной переменной для clearTimeout для правильной работы.

person Sarath Chandra    schedule 07.05.2016
comment
Этот тайм-аут не выдержит перезагрузку страницы. - person Sergio Tulentsev; 08.05.2016
comment
@SergioTulentsev: Вы правы, сэр! Я обновил свой ответ, чтобы решить и эту часть. - person Sarath Chandra; 08.05.2016
comment
Его отключение на 5 минут, но тайм-аут все еще не выдерживает перезагрузку страницы. - person haroon sheikh; 08.05.2016
comment
Кстати спасибо за помощь - person haroon sheikh; 08.05.2016
comment
@haroonsheikh Я не знаю, что у тебя происходит. Но я обновил ответ кодом, который у меня работает. Посмотрите, показывает ли консоль вашего браузера какие-либо ошибки. - person Sarath Chandra; 08.05.2016

arrow_upward
1
arrow_downward

Опираясь на хороший ответ Сарата (+1). . .

Поскольку вы пометили свой вопрос с помощью PHP и AJAX, вы также можете сделать это с помощью переменной PHP $_SESSION.

Переменные PHP $_SESSION хранятся на сервере и относятся к одному посетителю (на компьютере посетителя хранится файл cookie, который соответствует переменной на сервере, что создает индивидуальный, постоянный 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;
    }

Важное примечание: переменные SESSION не сохраняются вечно. После закрытия браузера этот сеанс исчезает. Чтобы сохранить сеансы «навсегда» (или, по крайней мере, за счет отказа браузера), используйте таблицу MySQL. Что вы храните в базе данных MySQL? Вы можете сохранить IP-адрес посетителя, но это не является надежным, поскольку они имеют тенденцию меняться с течением времени... но теперь вы очень близки к системе входа пользователя.

Обратите внимание, что есть аналогичные проблемы с использованием localstorage. Этот пост может быть полезен:

Когда очищается localStorage?

person cssyphus    schedule 08.05.2016

arrow_upward
0
arrow_downward

Я бы начал с сохранения времени, когда вы собираетесь отключить кнопки, в локальном хранилище, установил таймер и проверил это время при последующих перезагрузках.

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);
    }
})
person daniel.brubeck    schedule 07.05.2016
comment
Спасибо за помощь Валарауко. - person haroon sheikh; 08.05.2016