刷新面板javascript刷新

Question

我需要通過JavaScript重新加載我的面板內容。 我的網頁有兩個部分：a）產品清單和b）帶有產品說明的面板。 當用戶點擊產品時，我會顯示一個面板，該面板使用通過產品點擊傳遞的變量使用php代碼讀取數據庫信息。 （面板-ID）。我將panelId傳遞給一個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> 

Answer 1

要刷新下面命令你的模式是不夠

$('#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--> 

因此，假如你從服務器獲取cotents爲JSON，河套JSON和更新tablecontents