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

TAB1的内容由来自远程URL的ajax加载。当选择TAB1时，我必须切换到TAB2，然后返回到TAB1刷新加载的内容。在JQuery UI选项卡上单击刷新选项卡内容

如何使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>

来源

2009-10-28 jack

如果其中一个答案被标记为有效的答案，那将会很棒。 – ThatAintWorking 2014-03-25 16:25:36

在jQuery的调用的 “成功”，你可以用新的HTML替代HTML。

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

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

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

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

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

编辑2

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

对不起。

来源

2009-10-28 02:38:33 griegs

在哪里放这个代码？我没有TabOne类。请参考上面添加的HTML代码。 – jack 2009-10-28 02:57:24

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

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

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

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

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

我那时的标签

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

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

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

来源

2010-01-05 17:12:18 Calocher

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

来源

2010-11-18 23:39:31 jj2

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

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

来源

2011-05-19 21:51:54 emapple

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

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

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

来源

2011-07-26 17:36:09

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

来源

2011-10-08 03:51:51

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

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

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

来源

2012-02-16 22:26:55 baberlicious

从v1.7开始，您可以使用'.on（）'而不是'.delegate（）' – nawar 2012-03-01 05:36:55

好把东西我在一起有这样的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."); 
     } 
    } 
});

来源

2012-04-12 14:06:53 Jamee

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

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

和它的工作:)

来源

2013-12-24 08:44:37 Terry

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

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

来源

2014-05-22 04:55:53 Ehsan

重载由于这个问题已经在一段长时间回答多次，发布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。 “区域控制”可能是一个更合乎逻辑的名称，但作为一个歌剧狂热者，我并不抱怨。 :-)

来源

2014-10-10 14:14:53 Kristiaan

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

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

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

来源

2015-04-27 15:22:26

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

回答

相关问题