TAB1的内容由来自远程网址的ajax加载。当选择TAB1时,我必须切换到TAB2,然后返回到TAB1以刷新加载的内容。
单击其选项卡时如何使TAB1刷新加载的内容?
修改:HTML代码如下
<div id="tabs">
<ul>
<li><a href="url1">Tab1</a></li>
<li><a href="url2">Tab2</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$tabs = $("#tabs").tabs({
select: function(event, ui) {
$('a', ui.tab).click(function() {
$(ui.panel).load(this.href);
return true;
});
}
});
});
</script>
答案 0 :(得分:18)
刷新jQuery中的选项卡的另一种简单方法是使用load方法:
$('#my_tabs').tabs('load', 0);
数值是您要刷新的选项卡的从零开始的索引。
答案 1 :(得分:9)
1)在定义加载ajax内容的标签时,请确保使用title属性,该属性将该值放入加载的div的id中。在我的情况下,标题是“警报标签”。否则,jquery生成的div有一个神秘的id:
<li><a href="/alert/index" title="alert-tab">Alert</a></li>
2)现在在你要重新加载标签的任何事件中使用它:
var href = "/alert/index/";
$("#alert-tab").load(href);
答案 2 :(得分:4)
您只需删除所点击的标签内容,然后使用相同的内容(或任何您想要的内容)重新加载。例如:
$( "#tabs" ).tabs({
activate:function(event,ui){
//Remove the content of the current tab
ui.newPanel.empty();
//load the file you want into current panel
ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');
}
});
在这种情况下,例如,如果单击第二个选项卡,面板将被清空并重新加载content2.php
答案 3 :(得分:2)
我是这样做的。需要注意的一点是,我发现分配给DIV的ID会使每个选项卡的内容以可预测的方式命名,并始终与所选选项卡中锚点的href相对应。这种解决方案取决于具体情况,因此我认为它可能会被批评为“过于脆弱”。我从中提取代码的形式是一种可重用的控件,可能会也可能不会在选项卡中托管,这就是为什么我在执行.each()之前检查parentID的值。
//I get the parentID of the div hosting my form and then use it to find the appropriate anchor.
var parentID = '#' + $('#tblUserForm').parent().attr('id');
//Trying to enable click on an already selected tab.
if(parentID == '#ui-tabs-3') //The value of var parentID
{
$('#tabs a').each(function() {
if($(this).attr('href') == parentID)
{
$(this).bind('click', function() {
$(parentID).load(your_URL_here);
});
}
});
}
答案 4 :(得分:2)
很难解决这个问题,因为标签似乎会杀死点击事件......所以我只是使用了mousedown。
$("#tabs ul.ui-widget-header")
.delegate("li.ui-tabs-selected","mousedown",function(){
$tabs.tabs("load",$(this).index());
});
此问题是在不久前发布的,但我希望它可以帮助某人。
答案 5 :(得分:1)
我在jQuery选项卡中遇到了一些ajax内容的问题。
该选项卡会加载一个flot图,但只有当它是您首先加载的标签时才会起作用。
我用一种俗气的工作来解决这个问题,但它很有效。
我拿走了所有我的flot js代码并将其转储到一个单独的.js文件中并将其放入函数中
function doFlotGraph(data){
$.plot({plotcode});
};
然后我在标签
中做了以下内容$.getScript('url/doFlotGraph.js',function(){
doFlotGraph(data);
});
这允许flot做它的事情,因为在ajax $ .getScript被激活时,标签中的文件已经完成。
然后你可以将ajax放在该标签的.click中。
答案 6 :(得分:1)
要做到这一点,您只需要在创建过程中保存全局链接:
ui_tabs = $( "#tabs" ).tabs();
毕竟可以使用它涉及API加载
例如:转换标签页面部分的所有链接
$('#tabs .paging a').click(function(e){
var selected = ui_tabs.tabs('option', 'selected');
ui_tabs.tabs('url', selected, e.target.href);
ui_tabs.tabs('load', selected);
return false;
})
答案 7 :(得分:1)
好的把事情放在一起我有这个用于jquery标签的click事件,周围的div有一个标签的id,如下所示:
<div id="tabs">
以下内容在文档就绪函数中执行:
$('#tabs > ul > li > a').each(function (index, element) {
$(element).click(function () {
$('#tabs').tabs('load', index);
});
它为每个标签注册了点击事件,感谢Scott Pier的标签索引
我的文档中也准备好了,以防止缓存
$("#tabs").tabs({
ajaxOptions: {
cache: false,
error: function (xhr, status, index, anchor) {
$(anchor.hash).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
}
}
});
答案 8 :(得分:0)
关于jQuery调用的“成功”,你可以用新的html替换html。
你没有发布任何代码,所以你可能已经这样做了,但是;
success: function(msg) {
$('.TabOne').html(msg);
}
如果您要返回html,则上述工作正常。如果你要返回一个对象,那么你可能需要做额外的工作,但总的来说,上面的工作应该有效。
修改强> 我还应该提一下.TabOne是一个类名。因此,您的标签内容持有者必须有一类TabOne才能使上述代码生效。
请记住,类名实际上不必作为一种样式存在。
修改2
嗯,我看到你现在要做的事情,我有点不知所措。会做一些测试,也许可以回复你。对不起。
答案 9 :(得分:0)
我知道这个链接很旧,但我遇到了同样的情况。我试图理解并融入这里所说的所有内容,但它仍然没有用,或者它会破坏我所拥有的东西。
我有一个带有4个选项卡的模态对话框,索引值为0,1,2,3我想在选项卡1上打开,所以在我的代码中有以下行:
$("#tabs").tabs('select',1);
和选项卡1将始终包含先前的显示数据(html ajax内容),直到我单击其他选项卡(例如选项卡2)然后返回(选项卡1)...所以我执行了以下操作: / p>
// this forces tab content update
$("#tabs").tabs('select',1);
$("#tabs").tabs('select',2);
$("#tabs").tabs('select',1);
它有效:)
答案 10 :(得分:0)
由于这个问题已经在很长一段时间内得到了很多次的回答,因此发布更新版jquery的更新并不会有什么坏处。我正在使用jquery-ui 1.10.3而且Trevor Conn的假设似乎不再有效。 然而,他的方法帮助我做了一些修改。让我们说我想要刷新的标签名为&#34; tab_1&#34; (列表项的id)
<div id="tabs" class="tabs">
<ul>
<li id="tab_1">
<a href="my_link">tab one</a>
</li>
...(other tabs)...
</ul>
</div>
在我的javascript方法中刷新标签内容,我写(使用jquery):
var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);
属性&#34; aria-controls&#34;包含包含选项卡内容的div的id。 &#34;区域的控件&#34;可能是一个更合乎逻辑的名字,但作为一个歌剧家,我并没有抱怨。 : - )
答案 11 :(得分:0)
我找到了解决这个问题的方法。在尝试了所有这些方法后,它们都没有为我工作。所以为了简单起见,我想出了这个解决方案,虽然它不是最优雅的方式,但它仍然可以完成工作。
首先将焦点设置在其他选项卡上,然后将焦点返回到要刷新的选项卡。
$("#myTabs").tabs("option", "active", 0);
$("#myTabs").tabs("option", "active", 1);