Question

我使用twitter bootstrap的导航栏。每个选项卡的内容来自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文件的选项卡上。（我不记得bootstrap如何附加自己的onclick，所以如果它根本不起作用，那就是我先检查的地方。

但是，我个人会以一种可以接受$_GET参数的方式编写PHP文件的第二个版本，这样它就可以只返回所选选项卡的内容。结果通过ajax返回，然后您可以将其发送回选项卡。

根据您从PHP获得的内容，单击选项卡时可能会导致加载暂停时间短暂。

我不确定是否值得提前加载标签内容，如果你要点击选项卡重新加载它，无论如何。很难说没有更多细节。

更改选项卡上的Bootstrap导航栏刷新

2 个答案: