刷新时刷新面板javascript

Refresh panel javascript on refresh

本文关键字:刷新 javascript      更新时间:2023-09-26

我需要通过javascript重新加载面板内容。我的网页上有两个部分:a)产品列表和b)带有产品描述的面板。当用户点击产品时,我会显示一个面板,该面板使用php代码读取数据库信息,该代码使用我通过产品点击传递的变量。(面板id)。我将panelId传递给一个javascript,该javascript显示一个模式,通知用户正在进行数据库读取,之后它需要用新信息重新加载面板内容。我需要使用什么方法来刷新这个面板,以便它被迫读取php变量的新值?显示/隐藏似乎没用。

Javascript:

$('#getInfoModal').on('show.bs.modal', function(e) {
    var panelId = $(e.relatedTarget).data('panel-id');
    //console.log('Progress bar modal calling: ' + panelId);
    // Hide previous modal if any
    $('#main_panel').parent().hide();
    $('#modalProgressBar').progressbar('reset');
    // Emulate delay and close after progress bar finish
    setTimeout(func, 4000);
        function func() {
            $('#getInfoModal').modal('hide');
            $('#main_panel').parent().show(); // Method to force panel reload?
            $('.modal-backdrop').remove();              
    }
    setTimeout(function(){
       $('#modalProgressBar').progressbar(100);
    }, 1000);
});

HTML代码:

   <div class="col-lg-14">                  
                  <!-- START panel-->
                  <div id="main_panel" class="panel panel-default panel-demo">
                  <div class="panel-footer">
                  <div class="media">                                                       
                     <em class="fa fa-tasks fa-1x text-success"></em>
                     <strong>Device status</strong>
                     <a href="#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                     <em class="fa fa-minus"></em>
                     </a>
                     <a href="#" data-perform="panel-refresh" data-spinner="traditional" data-toggle="tooltip" title="Refresh Inventory" class="pull-right">
                        <em class="fa fa-refresh"></em>
                     </a>
                  </div>                  
                  </div>
                  <div class="panel-body">                                       
                  <div class="panel-group">
                  <!-- START row--> 
                  <div class="row" >
                     <div class="col-lg-6" >                                                                   
                           <!-- START panel-->
                           <div class="panel panel-info">
                              <div class="panel-heading"><em class="fa fa-barcode"></em> Serial number: <strong><?php echo $panel_id?></strong>                                 
                              </div>
                                 <div class="panel-body">
                                 <div class="media">
                                 <div class="pull-left">   
                                 <img src="app/img/switch4ports.png" alt="Image" width="150" height="100" data-toggle="tooltip" data-placement="left" title="2 ports connected" class="media-object">                                                            
                                 </div>                                 
                                 </div>
                                  <table id="table-ext-1" class="table">
                                    <thead>
                                    </thead>
                                    <tbody>
                                       <class="text-left">
                                       <tr>
                                        <!-- Yes, SQL injection is possible. Need refactoring--> 
                                       <td><small><em class="fa fa-check-circle-o text-success"></em><strong> WAN IP Address/Mask:<class="text-muted"></strong> <?php echo data_instance_model($dbc,'wanipaddr',$panel_id)?>/<?php echo data_instance_model($dbc,'wanmask',$panel_id)?></small></td>
                                       <td><small><em class="fa fa-check-circle-o text-success"></em><strong> WAN Default Gateway:<class="text-muted"></strong> <?php echo data_instance_model($dbc,'wangateway',$panel_id)?></small></td>
                                       </tr>
                                       <tr>
                                       <td><small><em class="fa fa-check-circle-o text-success"></em><strong> LAN IP Address/Mask:<class="text-muted"></strong> <?php echo data_instance_model($dbc,'lanipaddr',$panel_id)?></small></td>
                                       </tr>                          
                                    </tbody>
                                  </table>
                                 </div>                          
                           </div>
                        </div><!-- END panel-->                                 
                     </div> 
                  </div>

要刷新模式,下面的命令就足够了

$('#getInfoModal').modal("show");

但据我所知,你想更新小组的主体。因此,您要做的是在面板主体中放置一个div,并使用从ajax获得的内容对其进行更新。

例如

 <!-- START panel-->
<div class="panel panel-info">
    <div class="panel-heading"><em class="fa fa-barcode"></em> Serial number: <strong><?php echo $panel_id?></strong> 
    </div>
    <div class="panel-body">
        <div class="media">
            <div class="pull-left">
                <img src="app/img/switch4ports.png" alt="Image" width="150" height="100" data-toggle="tooltip" data-placement="left" title="2 ports connected" class="media-object">
            </div>
        </div>
        <div id="tablecontents"></div>
    </div>
</div>
</div>
<!-- END panel-->

因此,假设您以json的形式从服务器获取cotents,则循环json并更新tablecontents 中的表