Jquery UI - reload selected tab?

Question

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.

So your question is really how to get the selected tab's index? — Simen Echholt, Aug 08 '10 at 14:36

score 27 · Accepted Answer · edited May 23 '17 at 11:47

27

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

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

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

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

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

To answer the question indicated by the title, in jQuery 1.8 and earlier, you would do:

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

And in jQuery 1.9 and later, you would do:

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

edited May 23 '17 at 11:47

Community

1
1

answered Aug 08 '10 at 18:38

Simen Echholt

11,243
2
34
26

The problem with this solution is that it reloads non selected tabs twice (two hits on the server). – Dave Robertson Sep 24 '12 at 21:11
2

Unfortunately as of the latest version of jQuery UI this no longer works. You have to replace `"selected"` with `"active"`, as per attomman's answer below. – aroth Apr 22 '13 at 01:30
Did not work for me until added `$( "#tabs .ui-tabs-active").click();` – Konstantin Streletsky Sep 24 '17 at 13:36

score 7 · Answer 2 · answered Jan 30 '13 at 05:46

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

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

You now use 'active' instead of 'selected'

So the code will look like:

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

score 2 · Answer 3 · answered Feb 27 '13 at 16:28

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:

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

Where ttis the id of your tab group created via

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

score 1 · Answer 4 · answered Sep 24 '12 at 21:48

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. console showing a cancelled request to the server

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

This should be a separate question so people can answer properly :) — Simen Echholt, Sep 25 '12 at 12:56

score 0 · Answer 5 · answered Sep 23 '14 at 14:09

Download this Plugin for cookies:

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

Insert jQuery cookie to your page

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

Jquery UI - reload selected tab?

5 Answers5

Linked