如何在Ajax Jquery方法中使用setTimeout（）防止模式关闭？

Question

我试图使index.php页面使用setTimeout()每2秒从MySQL表“自动”加载数据。 问题是每次我单击第二页上的“查看详细信息”按钮（ order.php ）时，模式加载BUT都会在2秒后立即关闭。

当我单击“查看详细信息”按钮并在关闭模态后继续刷新div以从MySQL表加载数据时，如何防止模态自动关闭？

index.php（第一个php页面）

 // INDEX.PHP
 <body>
    <div id = "showCustomerOrder_div"></div>
 </body>

 <script>
 var interval = 2000;
 function displayCustomerOrder() {
$.ajax({
    type: 'POST',
    url: 'order.php',
    data: { },
    success: function (data) {
        $('#showCustomerOrder_div').html(data);
    },
    complete: function (data) {
        setTimeout(displayCustomerOrder, interval);
    }
});
 }
 setTimeout(displayCustomerOrder, interval);
 </script>

order.php（第二个php页面）

 // ORDER.PHP
 <?php
  $count = 0;
 while ($rows = mysqli_fetch_array($query)) {
  $count++;
  $date = $rows['date_order'];
  $receipt = $rows['receipt_no'];
  $fullname = $rows['fullname'];
  $restoname = $rows['resto_name'];
  $total = $rows['Total'];
 ?>
<tr>
    <td><?php echo $count; ?></td>
    <td><?php echo date_format($date,"m/d/y h:i:s"); ?></td>
    <td><?php echo $receipt; ?></td>
    <td>
    <a href = "#orderDetails<?php echo $receipt; ?>" data-toggle = "modal" class = "btn btn-primary">View Details</a>
    </td>
</tr>

    <div class = "modal" id = "orderDetails<?php echo $receipt; ?>">
        <div class = "modal-dialog">
            <div class = "modal-content">
                <div class = "modal-header">
                </div>
                <div class = "modal-body">
                    <div class = "row">                     
                      <div class = "col"><?php echo $rows['receipt_no']; ?></div>
                      <div class = "col"><?php echo $rows['fullname']; ?> </div>
                      <div class = "col"><?php echo  $rows['Total']; ?> </div>
                    </div>
                </div>
                <div class = "modal-footer">
                </div>
            </div>
        </div>
    </div>
 <?php
}
 ?>

非常感谢！

Answer 1

像这样

 $("#container").on("click","[data-toggle=modal]",function(e) { e.preventDefault(); var texts = $(this).closest("tr").find("td").map((_, cell) => cell.innerText).get(); texts.pop(); // lose the link text $(".row").empty(); $.each(texts, (_, text) => $(".row").append(`<div class="col">${text}</div>`)); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <table> <tr> <td>One</td> <td>2019 05 10</td> <td>receipt 1</td> <td> <a href="#" data-toggle="modal" class="btn btn-primary">View Details</a> </td> </tr> <tr> <td>Two</td> <td>2019 05 11</td> <td>receipt 2</td> <td> <a href="#" data-toggle="modal" class="btn btn-primary">View Details</a> </td> </tr> </table> </div> <div class="modal-body"> <div class="row"> </div> </div>

如何在Ajax Jquery方法中使用setTimeout（）防止模式关闭？

问题描述

1 个解决方案

解决方案1
0 2019-05-10 14:58:29

如何在Ajax Jquery方法中使用setTimeout（）防止模式关闭？

问题描述

1 个解决方案

解决方案1 0 2019-05-10 14:58:29

解决方案1
0 2019-05-10 14:58:29