在JQuery UI选项卡上单击刷新选项卡内容

Question

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的调用的 “成功”，你可以用新的HTML替代HTML。

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

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

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

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

请记住，类名不一定要作为样式存在才能使其工作。

编辑2

嗯，我看你正在尝试现在要做的和我在一个小的损失的。将做一些测试，并可能能够回复你。

对不起。

Answer 2

我有一个jQuery选项卡中的一些ajax内容的问题。

该选项卡会加载一个flot图形，但只有当它是您首先加载的选项卡时才能使用。

我修复了这种干净的工作，但它是有效的。

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

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

我那时的标签

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

此范围内以下允许flot完成它的工作，因为当ajax $ .getScript被激活时，标签中准备好的文档已经完成了。

然后，您可以将ajax放入该标签的.click文件中。

Answer 3

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 4

要做到这一点的权利，你只需要保存全球链接创建期间：

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 5

另一种简单的方式的页部分中的所有链接刷新标签在jQuery是使用负载方法：

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

的数值是的零基于索引你想刷新的标签。

Answer 6

下面是我做到的。有一点需要注意的是，我发现分配给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); 
       }); 
      } 
    }); 
} 

Answer 7

与这个问题挣扎，因为标签似乎杀死点击事件...所以我只是用mousedown。

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

这个问题刚刚发布，但我希望它可以帮助别人。

Answer 8

好把东西我在一起有这样的jQuery的标签的Click事件，周围的div有标签的ID，这样的：

<div id="tabs"> 

下获取文档ready函数执行：

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

它注册为每个选项卡中单击事件，与标签的感谢指数斯科特码头

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

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

我知道这个链接是旧的，但我遇到了同样的情况。我试图理解和整合这里陈述的所有内容，但它仍然无法正常工作，或者它会弄糟我所拥有的东西。

我有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 10

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

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

重载由于这个问题已经在一段长时间回答多次，发布jquery更新版本的更新无妨。我正在使用jquery-ui 1.10.3，而且特洛弗康恩所做的推测似乎不再有效。 但是，他的方法帮助我进行了一些修改。比方说，我想刷新选项卡被称为“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。 “区域控制”可能是一个更合乎逻辑的名称，但作为一个歌剧狂热者，我并不抱怨。 :-)

Answer 12

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

将焦点置于不同的选项卡上，然后将焦点返回到要刷新的选项卡。

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