单击JQuery UI选项卡时刷新选项卡内容-Java 学习之路

TAB1的内容由来自远程URL的ajax加载 . 选择TAB1时，我必须切换到TAB2，然后返回到TAB1以刷新加载的内容 .

单击其选项卡时如何使TAB1刷新加载的内容？

Edit: 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
刷新jQuery中的选项卡的另一种简单方法是使用load方法：
```
$('#my_tabs').tabs('load', 0);
```
数值是您要刷新的选项卡的从零开始的索引 .
回复于 2024-05-04T18:00:49+08:00
0
1）在定义加载ajax内容的选项卡时，请确保使用title属性，该属性将该值放入加载的div的id中 . 在我的情况下， Headers 是“警报标签” . 否则jquery生成的div有一个神秘的id：
```
<li><a href="/alert/index" title="alert-tab">Alert</a></li>
```
2）现在在你要重新加载标签的任何事件中使用它：
```
var href = "/alert/index/";  
$("#alert-tab").load(href);
```
回复于 2024-05-04T18:00:49+08:00

您只需删除单击的选项卡的内容，然后使用相同的内容（或任何您想要的内容）重新加载它 . 例如：

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

回复于 2024-05-04T18:00:49+08:00

1
这是我如何做到的 . 需要注意的一点是，我已经找到了分配给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);
              });
          }
    });
}
```
回复于 2024-05-04T18:00:49+08:00
0
努力解决这个问题，因为标签似乎会杀死点击事件...所以我只是使用了mousedown .
```
$("#tabs ul.ui-widget-header")
 .delegate("li.ui-tabs-selected","mousedown",function(){
   $tabs.tabs("load",$(this).index());
 });
```
这个问题是在不久前发布的，但我希望它可以帮助某人 .
回复于 2024-05-04T18:00:49+08:00
0
我在jQuery选项卡中遇到了一些ajax内容的问题 .

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

我用一种俗气的工作来解决这个问题，但它很有效 .

我把所有我的flot js代码并将其转储到一个单独的.js文件中并将其放入一个函数中
```
function doFlotGraph(data){
    $.plot({plotcode});
};
```
然后我在选项卡中执行了以下操作
```
$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});
```
这允许flot做它的事情，因为在ajax $ .getScript被激活时，选项卡中的文档已经完成 .

然后，您可以将ajax放在该选项卡的.click中 .
回复于 2024-05-04T18:00:49+08:00

要做到这一点，您只需要在创建过程中保存全局链接：

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

回复于 2024-05-04T18:00:49+08:00

好吧把事情放在一起我有jquery选项卡的click事件，周围的div有一个标签的id，如下所示：

<div id="tabs">

以下内容在文档就绪函数中执行：

$('#tabs > ul > li > a').each(function (index, element) {
    $(element).click(function () {         
        $('#tabs').tabs('load', index); 
    });

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

回复于 2024-05-04T18:00:49+08:00

0
关于jQuery调用的“成功”，你可以用新的html替换html .

你没有发布任何代码，所以你可能已经这样做但是;
```
success: function(msg) {
    $('.TabOne').html(msg);
}
```
如果你要返回html，上面的工作 . 如果您要返回一个对象，那么您可能需要做额外的工作，但总的来说，上述工作应该可行 .

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

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

Edit 2

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

抱歉 .
回复于 2024-05-04T18:00:49+08:00
1
我知道这个链接很旧，但我遇到了同样的情况 . 我试图了解并整合这里所说的所有内容，但它仍然没有用，或者它会破坏我所拥有的东西 .

我有一个带有4个选项卡的模态对话框，索引值为0,1,2,3，我想在选项卡1上打开，所以在我的代码中有以下行：
```
$("#tabs").tabs('select',1);
```
并且选项卡1将始终包含先前的显示数据（html ajax内容），直到我单击其他选项卡（例如选项卡2）然后返回（选项卡1）...所以我执行了以下操作：
```
// this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);
```
它工作:)
回复于 2024-05-04T18:00:49+08:00
2
由于这个问题已经在很长一段时间内得到了很多次的回答，因此发布更新版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 . “区域控制”可能是一个更合乎逻辑的名称，但作为一个歌剧家，我并没有抱怨 . :-)
回复于 2024-05-04T18:00:49+08:00
2
我找到了解决这个问题的工作 . 在尝试了所有之后这些方法，它们都不适合我 . 因此，为了简单起见，我想出了这个解决方案，虽然它不是最优雅的方式，但它仍然可以完成工作 .

首先将焦点设置在不同的选项卡上，然后将焦点返回到要刷新的选项卡 .
```
$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1);
```
回复于 2024-05-04T18:00:49+08:00

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

12 回答

相关问题