选项卡上的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获得的内容，当您单击选项卡时，这可能会导致加载暂停。

我不确定是否值得提前加载标签内容，如果你打算在单击标签时重新加载标签内容，无论如何。很难说没有更多的细节。