JQuery UI - перезагрузить выбранную вкладку?

Question

Есть ли способ перезагрузить выбранную вкладку, я знаю, что есть функция .load (). Но ему нужен индекс вкладок, и я не вижу способа получить идентификатор выбранных вкладок.

Answer 1

Обновление: в jQuery 1.9 опция selected переименована в active.См. ответ attomman.

Чтобы получить текущий выбранный индекс, используйте функцию tabs('option','selected').

Например, если у вас есть кнопка #button (и элемент #tabs превращается в закладки), где вы хотите получить индекс, выполните следующие действия:

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

Вот демонстрационная версия: http://jsfiddle.net/sVgAT/

Чтобы ответить на вопрос, обозначенный заголовком, в jQuery 1.8 и более ранних версиях вы должны сделать:

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

А в jQuery 1.9 и более поздних версиях:

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

Answer 2

Симен действительно имел правильный ответ, но теперь он устарел, поскольку JQuery UI 1.9

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

Теперь вы используете «активный» вместо «выбранный»

Таким образом, код будет выглядеть так:

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

Answer 3

Если кто-то еще наткнется на этот вопрос и - как я - использует вкладки от jQuery EasyUI, ответ Симена выше не сработает. Скорее, чтобы обновить вкладку, используйте:

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

Где tt - это id вашей группы вкладок, созданной с помощью

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

Answer 4

Мне удалось заставить это работать, но теперь он загружает первую вкладку дважды, когда она не активна.Если у кого-то есть еще какие-либо советы по этому вопросу, это было бы очень полезно.

Вы можете видеть выше, что запрос передается на сервер дважды, но первый запрос успешен, поэтому он отменяет второй.Не уверен, если это проблема или нет ..?Но я не успокаиваюсь, увидев это в консоли

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

Answer 5

Загрузить этот плагин для файлов cookie:

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

Вставьте файл cookie jQuery на свою страницу

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

и добавьте это:

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