在JQuery用户界面选项卡上单击刷新选项卡的内容(Refresh tab content on c

2019-09-01 19:52发布

TAB1的含量是通过从远程URL 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>

Answer 1:

另一种简单的方式来刷新jQuery的标签是使用load方法:

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

该数值是你要刷新标签的从零开始的索引。



Answer 2:

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


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



Answer 4:

以下是我做到了。 有一点要注意的是,我发现分配到的DIV呈现每个选项卡的内容的ID被漂亮预先命名,并始终与所选标签锚的href对应。 这个解决方案取决于既然如此,那么它可以被批评为“过于脆弱”我想。 我是从拉动代码的形式是一种可能会或可能不会被一个选项卡中托管的可重复使用的控制,所以这就是为什么我检查的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);
              });
          }
    });
}


Answer 5:

这个问题挣扎,因为标签似乎杀单击事件...所以我只是用鼠标按下。

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

这个问题被张贴前一段时间,但我希望它可以帮助别人。



Answer 6:

我有同样的问题,在一个jQuery标签一些Ajax的内容。

该选项卡中加载一个海军报图,但是当它是你先加载的标签将只工作。

我解决了这个问题带有一种潇洒的解决办法,但它是有效的。

我把我所有的海军报JS代码,并倾倒入一个单独的.js文件,并把它放在一个函数

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

然后我做了选项卡中的以下

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

这使得海军报尽自己的事情,因为准备的标签中的文件已经由AJAX $ .getScript被激活的时间内完成。

然后,您可以把该选项卡。点击一个内部的阿贾克斯。



Answer 7:

要做到这一点正确的,你只需要在创建过程中保存全球链接:

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


Answer 8:

好了把东西放在一起我有这样的jQuery的标签的Click事件,周围的div有标签的ID,如下所示:

<div id="tabs">

下面获取文档准备功能执行:

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

它注册为每个选项卡中单击事件,用tab感谢Scott码头的指数

我也有这个在我的文档准备,以防止缓存中

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


Answer 9:

在jQuery的呼叫的“成功”,就可以更换新的HTML代码的HTML。

您have'nt发布任何代码,所以你可能已经这样做,但是,

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

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

编辑我应该还提到,.TabOne是一个类名。 所以,你的标签内容持有人必须有一个类塔博恩的上面的代码工作。

请记住,类名没有实际存在的风格对于这个工作的。

编辑2

嗯,我看你正在尝试现在要做的和我在一个小的损失的。 会做一些测试,也许能回复你。

抱歉。



Answer 10:

我知道这个链接是老了,但我遇到了同样的情况。 我试图理解包含了所有在这里说,但它仍然不能正常工作,否则会弄脏我有什么。

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

和它的工作:)



Answer 11:

既然这个问题已经结束的很长一段时间回答了很多次,也不能伤害张贴较新版本的jQuery的更新。 我使用jQuery UI的1.10.3和Trevor康涅狄格州所做的assumpsions似乎没有有效了。 然而,他的做法帮我做一些修改。 比方说,我想刷新选项卡被称为“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);

属性“咏叹调-控制”包含含有选项卡内容的div id相同。 “区域控制”可能是一个更合乎逻辑的名字,但作为一个歌剧enthousiast,我不是在抱怨。 :-)



Answer 12:

我发现解决此问题的作品。 尝试所有的这些方法后,他们没有为我工作。 所以,为了简单起见,我想出了这个解决方案,虽然它不是最优雅的方式,它仍然没有工作。

首先将焦点设置不同的选项卡,然后将焦点返回到要刷新的标签。

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


文章来源: Refresh tab content on click in JQuery UI Tabs