单击JQuery UI选项卡时刷新选项卡内容

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的内容由来自远程URL的ajax加载。选择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>

12 个解决方案

#1

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.

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

#2

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

#3

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重新加载

#4

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

#5

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.

这个问题是在不久前发布的,但我希望它可以帮助某人。

#6

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.

该选项卡会加载一个flot图,但只有当它是您首先加载的选项卡时它才会起作用。

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中。

#7

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

#8

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选项卡的click事件,周围的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

它为click事件的每个选项卡注册,感谢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.");
        }
    }
});

#9

On the "success" of the jQuery call, you can replace the html with the new html.

关于jQuery调用的“成功”,你可以用新的html替换html。

You have'nt posted any code so you may already be doing this but;

你没有发布任何代码,所以你可能已经这样做但是;

success: function(msg) {
    $('.TabOne').html(msg);
}

the above works if you are returning html. If you are returning an object then you may need to do extra work but by and large the above should work.

如果你要返回html,上面的工作。如果您要返回一个对象,那么您可能需要做额外的工作,但总的来说,上述工作应该可行。

Edit I should mention also that .TabOne is a class name. So your tab content holder must have a class of TabOne for the above code to work.

编辑我还应该提到.TabOne是一个类名。因此,您的标签内容持有者必须具有一类TabOne才能使上述代码生效。

Remember that the class name doesn't have to actually exist as a style for this to work either.

请记住,类名称实际上不必作为样式存在。

Edit 2

Hmmm, I see what you are trying to do now and I'm at a bit of a loss. Will do some testing and might be able to get back to you.

嗯,我看到你现在要做的事情,我有点不知所措。会做一些测试,也许能够回复你。

Sorry.

#10

I know this link is old, but I ran into the same situation. I tried to understand and incorporate all that was stated here, but it still was not working or it would muck up what I have.

我知道这个链接很旧,但我遇到了同样的情况。我试图了解并整合这里所说的所有内容,但它仍然没有用,或者它会破坏我所拥有的东西。

I have a modal dialog with 4 tabs, index values 0,1,2,3 and I wanted to open on tab 1 so in my code there is the following line:

我有一个带有4个选项卡的模态对话框,索引值为0,1,2,3,我想在选项卡1上打开,所以在我的代码中有以下行:

    $("#tabs").tabs('select',1);

and tab 1 would always contain the previous displays data(html ajax content) until I would click on a different tab (for example tab 2) and then back (to tab 1) ...so I did the following:

并且选项卡1将始终包含先前的显示数据(html ajax内容),直到我单击其他选项卡(例如选项卡2)然后返回(选项卡1)...所以我执行了以下操作:

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

and it worked :)

它工作:)

#11

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。 “区域控制”可能是一个更合乎逻辑的名称,但作为一个歌剧家,我并没有抱怨。 :-)

#12

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

#1