在JQuery UI Tabs中点击时刷新选项卡内容

Question

TAB1的内容通过ajax从远程url加载。当选择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>

- jack

---

如果其中一个答案被标记为有效的解决方案，那就太好了。 - ThatAintWorking

Answer 1

使用jQuery刷新选项卡的另一种简单方法是使用load方法：

$('#my_tabs').tabs('load', 0);

数值是您希望刷新的选项卡的从零开始的索引。

- Scott Pier

Answer 2

1) 在定义加载 Ajax 内容的选项卡时，请务必使用 title 属性，将该值放入加载的 div 的 id 中。在我的情况下，标题是“alert-tab”。否则，jQuery 生成的 div 将具有晦涩的 id：

<li><a href="/alert/index" title="alert-tab">Alert</a></li>

2) 现在，在你想要重新加载选项卡的事件中使用此代码：

var href = "/alert/index/";  
$("#alert-tab").load(href);

- jj2

---

现在，自动生成选项卡面板的ID是根据<li>上的aria-controls属性值来确定的。 - Walf

Answer 3

您可以简单地删除所点击的选项卡中的内容，并使用相同的内容（或您想要的任何内容）重新加载它。例如：

$( "#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。

- Ehsan Khaveh

Answer 4

这是我做的方法。需要注意的一点是，我发现分配给渲染每个选项卡内容的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);
              });
          }
    });
}

- Trevor Conn

Answer 5

因为选项卡似乎会影响点击事件，所以我只使用了mousedown来解决这个问题。

$("#tabs ul.ui-widget-header")
 .delegate("li.ui-tabs-selected","mousedown",function(){
   $tabs.tabs("load",$(this).index());
 });

这个问题已经有一段时间了，但我希望它可以帮助到有需要的人。

- baberlicious

---

从v1.7开始，您可以使用.on()代替.delegate()。 - Mickey Mouse

Answer 6

要正确地执行此操作，您只需要在创建时保存全局链接：

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;
})

- emapple

Answer 7

我曾遇到与jQuery选项卡中的某些ajax内容相同的问题。

该选项卡会加载一个flot图表，但只有当它是您首先加载的选项卡时才能正常工作。

我通过一种有点愚蠢的解决方法来解决这个问题，但它非常有效。

我将所有的flot js代码都转移到了一个单独的.js文件中，并将其放入一个函数中。

function doFlotGraph(data){
    $.plot({plotcode});
};

然后我在选项卡内执行了以下操作

$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});

这样做可以让 flot 正常工作，因为在 ajax $.getScript 被激活时，选项卡中的文档已经准备就绪。

然后，您可以将 ajax 放在该选项卡的 .click 中。

- Calocher

Answer 8

好的，把东西放在一起，对于jQuery选项卡的点击事件，周围的div具有id为“tabs”，就像这样：

<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.");
        }
    }
});

- Jamee

Answer 9

由于这个问题已经在很长一段时间内被回答了很多次，因此为了更新更近期的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>

在我的 JavaScript 方法中刷新选项卡内容时，我使用 jQuery 编写了以下代码：

var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);

属性 "aria-controls" 包含包含选项卡内容的 div 的 id。"area-controls" 可能是一个更合适的名称，但作为一个歌剧爱好者，我不会抱怨。:-)

- Kristiaan

Answer 10

我找到了解决这个问题的方法。尝试了所有这些方法后，都没有起作用。所以为了简单起见，我想出了这个解决方案，虽然它不是最优雅的方式，但仍然能够完成工作。

首先将焦点设置在另一个选项卡上，然后再将焦点返回到您想要刷新的选项卡上。

$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1); 

- C.Perez