使用jquery自动重新加载/刷新div会对页面样式产生影响

Question

我建立了我的待定订单，销售和已完成订单的索引页面。每一分钟的数据是changed.so，我决定刷新特定的目录，通过jquery，并成功地通过更改数据dynamically.But问题开始在我的style.When上，目录是重新放置的，卡的风格是分心的，我不知道为什么会发生这种情况。

 <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);
    });

在应用加载之前无法understand.image发生了什么错误？

​

加载后的图像

​

Answer 1

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

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