Jquery UI - 重新加载选定的选项卡？

Jquery UI - reload selected tab?

提问by Renari

Is there a way to reload the selected tab I know there is the .load() function. But it wants a tab index and I don't seem to see a way to grab the selected tabs id.

有没有办法重新加载选定的选项卡我知道有 .load() 函数。但它需要一个标签索引，我似乎没有看到获取所选标签 ID 的方法。

回答by Simen Echholt

Update: In jQuery 1.9, the selectedoption is renamed to active. See attomman's answer.

更新：在 jQuery 1.9 中，该selected选项被重命名为active. 见阿托曼的回答。

To get the currently selected index, use the tabs('option','selected')function.

要获取当前选定的索引，请使用该tabs('option','selected')函数。

E.g, if you have a button #button(and the #tabselement is made into tabs) where you want to get the index, do the following:

例如，如果您有一个想要获取索引的按钮#button（并且#tabs元素被制作成选项卡），请执行以下操作：

$("#button").click(function() {
    var current_index = $("#tabs").tabs("option","selected");
});

Here's a demo: http://jsfiddle.net/sVgAT/

这是一个演示：http: //jsfiddle.net/sVgAT/

---

---

要回答标题指示的问题，在 jQuery 1.8 及更早版本中，您可以执行以下操作：

var current_index = $("#tabs").tabs("option","selected");
$("#tabs").tabs('load',current_index);

And in jQuery 1.9 and later, you would do:

在 jQuery 1.9 及更高版本中，你会这样做：

var current_index = $("#tabs").tabs("option","active");
$("#tabs").tabs('load',current_index);

回答by attomman

Simen did have the correct answer but this has now been deprecated since JQuery UI 1.9

Simen 确实有正确的答案，但自 JQuery UI 1.9 以来，这已被弃用

http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active

http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active

You now use 'active' instead of 'selected'

您现在使用 'active' 而不是 'selected'

So the code will look like:

所以代码看起来像：

var current_index = $("#tabs").tabs("option","active"); $("#tabs").tabs('load',current_index);

var current_index = $("#tabs").tabs("option","active"); $("#tabs").tabs('load',current_index);

回答by Bernd

In case anyone else stumbles upon this question and - like me - is using the tabs by jQuery EasyUI, Simen's answer above won't work. Rather, to refresh a tab, use:

万一其他人偶然发现这个问题，并且像我一样使用 jQuery EasyUI 的选项卡，上面的 Simen 答案将不起作用。相反，要刷新选项卡，请使用：

var tab = $('#tt').tabs('getSelected');
tab.panel('refresh');

Where ttis the idof your tab group created via

哪里tt是id通过你的标签组的创建

<div id="tt" class="easyui-tabs">

回答by Dave Robertson

I managed to get this to work but it now loads the first tab twice when it isn't active. If anyone has any more advice on this that would be much appreciated.

我设法让它工作，但它现在在第一个选项卡不活动时加载两次。如果有人对此有更多建议，将不胜感激。

You can see above that the request is made twice to the server but the first request is successful so it cancels the second. Not sure if this is an issue or not..? But Im not being reassured by seeing it in the console

您可以在上面看到该请求向服务器发出两次，但第一个请求成功，因此它取消了第二个请求。不确定这是否是一个问题..？但是在控制台中看到它我并不放心

  constructor: (@element) ->
    @tabIndex = 0
    @tabs = @element.find('#tabs')
    @tabs.tabs
      spinner: "Loading.."
      cache: false
      ajaxOptions:
        cache: false
        error: ( xhr, status, index, anchor ) ->
          $( anchor.hash ).html "Couldn't load this tab. We'll try to fix this as soon as possible."

    #add custom load to make sure they always reload even the current tab when clicked
    @element.find('ul li a').click (e) =>
      if @tabIndex is @tabs.tabs('option', 'selected')
        @tabs.tabs 'load', @tabs.tabs('option', 'selected')
        @tabIndex = @tabs.tabs('option', 'selected')

回答by Wassim Sboui

Download this Plugin for cookies:

下载 cookie 插件：

http://plugins.jquery.com/cookie/

http://plugins.jquery.com/cookie/

Insert jQuery cookie to your page

将 jQuery cookie 插入您的页面

 <script src="jquery.cookie.js"></script>

and add this :

并添加这个：

$(".tabs").click(function() {
    //getter , get the active tab
    var active = $( "#tabs" ).tabs( "option", "active" );
    $.cookie("tabs_selected", active);
});

var cookieValue = $.cookie("tabs_selected");
// setter, set the active tab stocked 
$( "#tabs" ).tabs( "option", "active",cookieValue );