php - 使用 jquery 自动重新加载/刷新 div 会影响页面样式

Question

我设置了我的索引页面，其中包含挂单、销售和已完成的订单。数据每分钟都会更改。所以我决定通过 jquery 刷新特定的 div，并通过动态更改数据获得成功。但是问题从我的风格开始。当 div 重新加载时，卡片的风格会分散注意力。我不知道为什么会这样.

 <div class="row"  >
                         <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12" id="here">
                            <div class="row">
                                <div class="col-xl-12">
                            <div class="card border-3 border-top border-top-primary">
                                <div class="card-body">
                                    <h5 class="text-muted">Total Sales</h5>
                                    <div class="metric-value d-inline-block">
                                        <h1 class="mb-1 text-center"><?  if($total != '') { echo "Rs: ".$total; } else { echo "Rs: 0";} ?></h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                            <div class="row">
                                <div class="col-xl-12">
                            <div class="card border-3 border-top border-top-primary">
                                <div class="card-body">
                                    <h5 class="text-muted">Complted Order</h5>
                                    <div class="metric-value d-inline-block">
                                        <h1 class="mb-1 text-center"><?= $complte." Nos"; ?></h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                         <div class="row">
                            <div class="col-xl-12">
                           <div class="card border-3 border-top border-top-primary">
                                <div class="card-body">
                                    <h5 class="text-muted">Pending Order</h5>
                                    <div class="metric-value d-inline-block">
                                        <h1 class="mb-1 text-center"><?= $pending." Nos"; ?></h1>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div class="col-xl-9 col-lg-12 col-md-6 col-sm-12 col-12">
            <?
            $orderquery = mysqli_query($conn,"SELECT * FROM ordermaster o LEFT JOIN customer c ON o.custid = c.custid  WHERE o.status = 'p' AND orderdt = CURRENT_DATE() ");
            ?>
                            <div class="card">
                                <h5 class="card-header">Recent Orders</h5>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead class="bg-light">
                                                <tr class="border-0">
                                                    <th class="border-0">#</th>
                                                    <th class="border-0">Name</th>
                                                    <th class="border-0">Phone</th>
                                                    <th class="border-0">Address</th>
                                                    <th class="border-0">Pincode</th>
                                                    <th class="border-0">City</th>
                                                    <th class="border-0">Order Time</th>
                                                    <th class="border-0">Amount</th>
                                                    <th class="border-0">View</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?
                                                $count = 1;
                                                while($res = mysqli_fetch_array($orderquery))
                                                {
                                                    ?>
                                                    <tr>
                                                    <td><?= $count; ?></td>
                                                    <td><?= $res['name']; ?> </td>
                                                    <td><?= $res['phone']; ?> </td>
                                                     <td><?= $res['addr1']."/".$res['addr2']; ?> </td>
                                                     <td><?= $res['pincode']; ?> </td>
                                                      <td><?= $res['city']; ?> </td>
                                                       <td><?= $res['orderdtm']; ?> </td>
                                                        <td><?= $res['net']; ?> </td>
                                                         <td><button class="btn btn-sm btn-outline-primary" title="View Product" onclick="del('<? echo $res['orderid'];?>')" value="id" data-toggle="modal" data-target="#delete" data-backdrop="static" data-keyboard="false"><i class="fas fa-eye"></i></button></td>
                                                     </tr>
                                                    <?
                                                    $count++;
                                                }
                                                ?>
                                                <tr>
                                                    <td colspan="9"><a href="#" class="btn btn-outline-light float-right">View Details</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

我重新加载 div 的 jquery 编码是

 $(document).ready(function(){
     setInterval(function(){
  $("#here").load(window.location.href + " #here" );
   }, 3000);
    });

发生了什么错误我无法理解。应用加载之前的图像

加载后的图像

标签： phpjqueryhtmlcss

Answer 1

要停止循环，您可以使用 clearInterval() Jquery 替换为

 $(document).ready(function(){
 window.setInterval(function(){
 $("#here").load(window.location.href + " #here");
   }, 3000);
   clearInterval() 
});