选项卡上的Bootstrap导航栏刷新更改
我使用twitter引导程序的导航栏。每个选项卡的内容来自一个从数据库加载数据的php函数。一旦页面已经加载,我希望能够刷新每个选项卡下的数据(这相当于再次调用各自的php函数)。我想这将是jQuery的onclick()事件,但我如何更新内容?选项卡上的Bootstrap导航栏刷新更改
<?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>
所以这里是一个非常简单的解决方案,使用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;
}
}
?>
您可以更新任何东西而不需要重新加载整个页面上即时的唯一方法是通过JavaScript/jQuery的,特别是在使用AJAX你的情况。 因此,您必须将onclick
附加到运行ajax回调到您的PHP文件的选项卡上。 (我不记得引导程序如何附加它自己的onclick
,所以如果它根本不工作,那就是我首先要检查的地方)。
但是,我个人会写一个PHP文件的第二个版本,它可以接受$_GET
参数,因此它只能返回选定选项卡的内容。 结果通过ajax返回,然后您可以将其发送回选项卡。
根据您从PHP获得的内容,当您单击选项卡时,这可能会导致加载暂停。
我不确定是否值得提前加载标签内容,如果你打算在单击标签时重新加载标签内容,无论如何。很难说没有更多的细节。
谢谢。我会尽力做到这一点。只是希望有一个简单的,已经实施的解决方案。 – ZviBar 2013-03-07 19:29:58
如果内容在您点击时应该改变,那么它必须是更复杂的东西。我最近才开始使用jQuery,但是我发现ajax函数比在javascript中手工编写代码更容易使用,所以值得为您检查。 [jQuery的ajax参考](http://api.jquery.com/jQuery.ajax/) – semmelbroesel 2013-03-07 20:07:03
我发布了一个解决方案,上面的作品。 – ZviBar 2013-03-07 20:17:44
这将是很高兴知道为什么我的问题downvoted。 – ZviBar 2013-03-07 21:50:05