在 JQuery UI 选项卡中单击时刷新选项卡内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1634909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh tab content on click in JQuery UI Tabs
提问by Hyman
Content of TAB1 is loaded by ajax from remote url. When TAB1 is selected, I have to switch to TAB2 and then back to TAB1 to refresh the loaded content.
TAB1 的内容由 ajax 从远程 url 加载。选择Tab1时，我必须切换到Tab2，然后返回Tab1以刷新加载的内容。
How to make TAB1 refresh loaded content when click on its tab?
单击选项卡时如何使 TAB1 刷新加载的内容？
Edit:HTML code is as below
编辑：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>
回答by Scott Pier
Another simple way to refresh a tab in jQuery is to use the load method:
在 jQuery 中刷新选项卡的另一种简单方法是使用 load 方法：
$('#my_tabs').tabs('load', 0);
The numeric value is the zero based index of the tab you wish to refresh.
数值是您要刷新的选项卡的从零开始的索引。
回答by jj2
1) When defining your tabs that load ajax content, make sure to use a title attribute, which puts that value into the loaded div's id. In my case the title was "alert-tab". Otherwise the jquery generated div has an arcane id:
1) 在定义加载 ajax 内容的选项卡时，请确保使用 title 属性，该属性将该值放入加载的 div 的 id 中。就我而言，标题是“警报标签”。否则 jquery 生成的 div 有一个神秘的 id：
<li><a href="/alert/index" title="alert-tab">Alert</a></li>
2) Now use this inside whatever event you want to reload the tab:
2）现在在您想要重新加载选项卡的任何事件中使用它：
var href = "/alert/index/";
$("#alert-tab").load(href);
回答by Ehsan Khaveh
You can simply remove the content of the tab that was clicked and reload it with the same content (or anything you want). For instance:
您可以简单地删除被单击的选项卡的内容，然后使用相同的内容（或您想要的任何内容）重新加载它。例如：
$( "#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');
}
});
In this case, for example if the second tab is clicked, the panel is emptied and reloaded with content2.php
在这种情况下，例如，如果单击第二个选项卡，则面板将清空并重新加载 content2.php
回答by Trevor Conn
Here's how I did it. One thing to note is that I have found the IDs assigned to the DIVs rendering each tab's content to be named pretty predictably, and to always correspond with the href of the anchor in the selected tab. This solution depends on that being the case, so it could be criticized as "too brittle" I suppose. The form I'm pulling the code from is a sort of re-usable control that may or may not be hosted within a tab, so that's why I check the value of parentID before doing the .each().
这是我如何做到的。需要注意的一件事是，我发现分配给呈现每个选项卡内容的 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);
});
}
});
}
回答by baberlicious
struggled with this issue because the tabs seem to kill click events... so i just used mousedown.
为这个问题而苦苦挣扎，因为标签似乎会杀死点击事件......所以我只是使用了mousedown。
$("#tabs ul.ui-widget-header")
.delegate("li.ui-tabs-selected","mousedown",function(){
$tabs.tabs("load",$(this).index());
});
this question was posted a while ago, but i hope it helps someone.
这个问题是前一段时间发布的，但我希望它可以帮助某人。
回答by Jamee
Ok putting things together I have this for the click event of the jquery tabs, the surrounding div has an id of tabs, like this:
好的，把这些东西放在一起，我有这个用于 jquery 选项卡的点击事件，周围的 div 有一个选项卡的 id，如下所示：
<div id="tabs">
The following gets executed in the document ready function:
在文档就绪函数中执行以下操作：
$('#tabs > ul > li > a').each(function (index, element) {
$(element).click(function () {
$('#tabs').tabs('load', index);
});
It registers for every tab the click event, with the index of the tab thanks to Scott Pier
由于 Scott Pier，它为每个标签注册了点击事件，以及标签的索引
I also have this in my document ready to prevent caching
我的文档中也有这个准备防止缓存
$("#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.");
}
}
});
回答by emapple
To do this right you just need to save global link during creation:
要做到这一点，您只需要在创建过程中保存全局链接：
ui_tabs = $( "#tabs" ).tabs();
After all can use it involving API load
毕竟可以使用它涉及API加载
For example: transform all links on the page sections of tabs
例如：转换选项卡页面部分上的所有链接
$('#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;
})
回答by Calocher
I had the same problem with some ajax content in a jQuery tab.
我在 jQuery 选项卡中的一些 ajax 内容遇到了同样的问题。
The tab loads a flot graph but it would work only when it was the tab you loaded first.
该选项卡加载了一个浮点图，但只有当它是您首先加载的选项卡时才会起作用。
I fixed this with a kind of cheesy work around but it was effective.
我用一种俗气的方法解决了这个问题，但它很有效。
I took all of my flot js code and dumped it into a separate .js file and put it in a function
我把我所有的 flot js 代码转储到一个单独的 .js 文件中，然后把它放在一个函数中
function doFlotGraph(data){
$.plot({plotcode});
};
I then did the following within the tab
然后我在选项卡中执行了以下操作
$.getScript('url/doFlotGraph.js',function(){
doFlotGraph(data);
});
This allowed flot to do its thing since the document ready in the tab had already finished by the time the ajax $.getScript was activated.
这允许 flot 做它的事情，因为在 ajax $.getScript 被激活时，选项卡中准备好的文档已经完成。
You could then put the ajax within a .click for that tab.
然后，您可以将 ajax 放在该选项卡的 .click 中。
回答by Kristiaan
Since this question has been answered many times over a long period of time, it couldn't hurt to post an update for more recent versions of jquery. I'm using jquery-ui 1.10.3 and the assumpsions Trevor Conn made don't seem to be valid anymore. However, his approach helped me with some modification. Let's say the tab I wish to refresh is called "tab_1" (id of the list item)
由于这个问题已经在很长一段时间内得到了多次回答，因此发布更新版本的 jquery 不会有什么坏处。我正在使用 jquery-ui 1.10.3 并且 Trevor Conn 所做的假设似乎不再有效。但是，他的方法帮助我进行了一些修改。假设我希望刷新的选项卡称为“tab_1”（列表项的 ID）
<div id="tabs" class="tabs">
<ul>
<li id="tab_1">
<a href="my_link">tab one</a>
</li>
...(other tabs)...
</ul>
</div>
In my javascript method to refresh the tab content, I write (using jquery):
在我刷新选项卡内容的 javascript 方法中，我编写（使用 jquery）：
var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);
The attribute "aria-controls" contains the id of the div containing the tab content. "area-controls" might have been a more logical name, but as an opera enthousiast, I'm not complaining. :-)
属性“aria-controls”包含包含选项卡内容的 div 的 id。“区域控制”可能是一个更合乎逻辑的名字，但作为一个歌剧爱好者，我并没有抱怨。:-)
回答by C.Perez
I found a work around this issue. After trying all of these methods, none of them worked for me. So for simplicity I came up with this solution and while it's not the most elegant way, it still does the work.
我找到了解决此问题的方法。在尝试了所有这些方法后，没有一个对我有用。所以为了简单起见，我想出了这个解决方案，虽然它不是最优雅的方式，但它仍然可以工作。
Set the focus on a different tab first and then return the focus to the tab you want to refresh.
首先将焦点设置在不同的选项卡上，然后将焦点返回到要刷新的选项卡。
$("#myTabs").tabs("option", "active", 0);
$("#myTabs").tabs("option", "active", 1);
