Как обновить sh страницу каждые 60 секунд без потери существующих данных в div?

Question

Я внедряю средство отслеживания состояния продуктов, в котором у меня есть номер заказа для каждого заказа.

Когда страница загружается, я выполняю вызов AJAX, чтобы узнать текущий статус заказа. Этот статус добавлен в мой div. Теперь, когда мой админ изменит статус заказа, я хочу, чтобы новый статус добавлялся к div без потери текущего статуса.

Я пытался сделать это, но когда моя страница перезагрузилась, прошлый статус теряется.

Вот часть кода:

<!-- I used this for page reload -->
<meta http-equiv="refresh" content="60"/>

<div id="progressbar" style="border:1px solid white;width:75%;margin:20px auto; display: flex; 
  padding:10px; flex-wrap: wrap;flex-direction: row; justify-content: space-around;">

</div>

<script>
    $(document).ready(function()
    {
        var orderNo = "<?php echo $orderNo; ?>"; 
        alert(orderNo);

        $.ajax({
            url:'action.php', 
            method:'post',
            data:{orderNo,orderNo},
            success:function(response)
            {
                $("#progressbar").append(response);
            }

        });

    });

</script>

А потом в моем action.php файл:

// ORDER PROGRESS
if (isset($_POST['orderNo']))
{
    $orderNo=$_POST['orderNo'];

    $orderSt="SELECT O_Status from orders WHERE O_No='$orderNo'";

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $orderRes=$conn->query($orderSt);

     $orderRow=$orderRes->fetch(PDO::FETCH_ASSOC);
     $orderStatus=$orderRow['O_Status'];
     echo $orderStatus;

}

Для перезагрузки страницы я использовал:

<meta http-equiv="refresh" content="60"/>

Answer 1

Вместо перезагрузки всей страницы вы могли бы просто делать вызов AJAX каждые 60 секунд. Для этого поместите вызов AJAX в функцию и используйте вызов setTimeout() в обратном вызове success запроса AJAX, чтобы снова вызвать функцию с заданной задержкой.

jQuery($ => {
  var orderNo = "<?php echo $orderNo; ?>";

  function getData() {
    $.ajax({
      url: 'action.php',
      method: 'post',
      data: {
        orderNo: orderNo
      },
      success: function(response) {
        $("#progressbar").append(response);
        setTimeout(getData, 60000); // repeat in 60 secs, if AJAX was successful
      }
    });
  }

  getData(); // on load
});

Обратите внимание, что пары ключ / значение в предоставляемом вами объекте должны быть разделены :, а не ,. Я предполагаю, что это была просто опечатка в вопросе.