選項卡上的Bootstrap導航欄刷新更改

Question

我使用twitter引導程序的導航欄。每個選項卡的內容來自一個從數據庫加載數據的php函數。一旦頁面已經加載，我希望能夠刷新每個選項卡下的數據（這相當於再次調用各自的php函數）。我想這將是jQuery的onclick（）事件，但我如何更新內容？

<?php 
    require_once 'Offers.php'; 
    $offers = new Offers(); 
?> 

<div class="navbar"> 
    <div class="navbar-inner"> 
    <ul class="nav" id="mytab"> 
     <li class="active"><a href="#tab1" data-toggle="tab">A</a></li> 
     <li><a href="#tab2" data-toggle="tab">B</a></li> 
     <li><a href="#tab3" data-toggle="tab">C</a></li> 
    </ul> 
    </div> 
</div> 


<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <?php echo($offers->retrieveA());?> 
    </div> 
    <div class="tab-pane" id="tab2"> 
     <?php echo($offers->retrieveB());?> 
    <div class="tab-pane" id="tab3"> 
     <?php echo($offers->retrieveC());?> 
    </div> 

Answer 1

所以這裏是一個非常簡單的解決方案，使用ajax。

首先，我們附加一個jQuery事件點擊每個選項卡，然後觸發ajax調用我們的函數。因爲通常ajax事件在一個文件中調用一些php腳本，在這裏我們必須處理函數，我們把它們放在一個單獨的php文件中，並使用switch case聲明在它們之間進行選擇。

所以，我們走吧。首先，我們在導航欄中添加ID：

<li class="active"><a href="#tab1" data-toggle="tab" id="nav1">A</a></li> 
<li><a href="#tab2" data-toggle="tab" id="nav2">B</a></li> 
<li><a href="#tab3" data-toggle="tab" id="nav3">C</a></li> 

然後單擊每個選項卡的事件處理程序。每個處理程序使用ajax來更新選項卡內容。

//Functions to dynamically update navbar 
$('#nav1').click(function() { 
    $.ajax({ url: 'refreshTabContent.php', 
      data: {whichTab: 'tab1'}, 
      type: 'post', 
      success: function(output) { 
        $('#tab1').html(output); 
        } 
    }); 
}); 
$('#nav2').click(function() { 
    $.ajax({ url: 'refreshTabContent.php', 
      data: {whichTab: 'tab2'}, 
      type: 'post', 
      success: function(output) { 
         $('#tab2').html(output); 
        } 
    }); 
}); 
$('#nav3').click(function() { 
    $.ajax({ url: 'refreshTabContent.php', 
      data: {whichTab: 'tab3'}, 
      type: 'post', 
      success: function(output) { 
         $('#tab3').html(output); 
        } 
    }); 
}); 

以下是操作方法。在每個處理程序中，我們稱之爲新的php腳本「refreshTabContent.php」，我們即將撰寫。在基於whichTab值的腳本中，我們調用相應的函數，該函數返回我們想要在適當的選項卡中顯示的內容，然後將其回顯。

<?php 

require_once 'Offers.php'; 
$offers = new Offers(); 


if(isset($_POST['whichTab']) && !empty($_POST['whichTab'])) { 
    $action = $_POST['whichTab']; 
    switch($action) { 
     case 'tab1' : 
      echo($offers->retrieveA()); 
      break; 
     case 'tab2' : 
      echo($offers->retrieveB()); 
      break; 
     case 'tab3' : 
      echo($offers->retrieveC()); 
      break; 
    } 
} 

?> 

Answer 2

您可以更新任何東西而不需要重新加載整個頁面上即時的唯一方法是通過JavaScript/jQuery的，特別是在使用AJAX你的情況。 因此，您必須將onclick附加到運行ajax回調到您的PHP文件的選項卡上。 （我不記得引導程序如何附加它自己的onclick，所以如果它根本不工作，那就是我首先要檢查的地方）。

但是，我個人會寫一個PHP文件的第二個版本，它可以接受$_GET參數，因此它只能返回選定選項卡的內容。 結果通過ajax返回，然後您可以將其發送回選項卡。

根據您從PHP獲得的內容，當您單擊選項卡時，這可能會導致加載暫停。

我不確定是否值得提前加載標籤內容，如果你打算在單擊標籤時重新加載標籤內容，無論如何。很難說沒有更多的細節。