Обновить содержимое вкладки на вкладке JQuery UI

Ответ 1

Еще один простой способ обновить вкладку в jQuery - использовать метод загрузки:

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

Числовое значение - это индекс на основе нуля вкладки, которую вы хотите обновить.

Ответ 2

1) При определении вкладок, загружающих контент ajax, обязательно используйте атрибут title, который помещает это значение в загруженный div id. В моем случае название было "alert-tab". В противном случае генерируемый jquery div имеет тайный id:

<li><a href="/alert/index" title="alert-tab">Alert</a></li>

2) Теперь используйте это в любом событии, которое вы хотите перезагрузить вкладку:

var href = "/alert/index/";  
$("#alert-tab").load(href);

Ответ 3

Вы можете просто удалить содержимое вкладки, которая была нажата, и перезагрузить ее с тем же содержимым (или что угодно). Например:

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

Ответ 4

Вот как я это сделал. Следует отметить, что я нашел идентификаторы, назначенные DIVs, которые отображают каждый контент вкладки, который будет называться довольно предсказуемым, и всегда соответствовать href привязки на выбранной вкладке. Это решение зависит от того, что имеет место, поэтому его можно критиковать как "слишком хрупкое", я полагаю. Форма, из которой я извлекаю код, - это своего рода повторно используемый элемент управления, который может размещаться или не размещаться на вкладке, поэтому я проверяю значение parentID перед выполнением .each().

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

Ответ 5

боролся с этой проблемой, потому что вкладки, похоже, убивают события кликов... поэтому я просто использовал mousedown.

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

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

Ответ 6

У меня была та же проблема с некоторым содержимым ajax на вкладке jQuery.

Вкладка загружает графику флота, но она будет работать только тогда, когда она была первой загруженной вкладкой.

Я исправил это с видом дрянной работы, но это было эффективно.

Я взял весь код моего флота js и выкинул его в отдельный .js файл и поместил его в функцию

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

Затем я сделал следующее на вкладке

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

Это позволило флоту выполнить свою задачу, так как документ, готовый на вкладке, уже был завершен к моменту активации ajax $.getScript.

Затем вы можете поместить ajax внутри .click для этой вкладки.

Ответ 7

Для этого вам просто нужно сохранить глобальную ссылку во время создания:

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

Ответ 8

Хорошо складывая вещи, у меня есть это для события click на вкладках jquery, у окружающего div есть идентификатор вкладок, например:

<div id="tabs">

В функции готовности документа выполняется следующее:

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

Он регистрирует для каждой вкладки событие щелчка с индексом вкладки благодаря Scott Pier

У меня также есть это в моем документе, готовом предотвратить кеширование

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

Ответ 9

В случае "успеха" вызова jQuery вы можете заменить html новым html.

Вы не указали какой-либо код, чтобы вы, возможно, уже делали это, но

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

выше работает, если вы возвращаете html. Если вы возвращаете объект, вам может потребоваться дополнительная работа, но в целом выше должно работать.

Edit Я должен также упомянуть, что .TabOne - это имя класса. Таким образом, ваш владелец содержимого вкладки должен иметь класс TabOne для работы вышеприведенного кода.

Помните, что имя класса не обязательно должно существовать как стиль для этого.

Изменить 2

Хммм, я вижу, что вы пытаетесь сделать сейчас, и я немного потерял. Проделает некоторые испытания и, возможно, сможет вернуться к вам.

К сожалению.

Ответ 10

Я знаю, что эта ссылка устарела, но я столкнулся с той же ситуацией. Я попытался понять и включить все, что было сказано здесь, но оно все еще не работает, или оно будет искажать то, что у меня есть.

У меня есть модальный диалог с 4 вкладками, значениями индекса 0,1,2,3 и я хотел открыть на вкладке 1, поэтому в моем коде есть следующая строка:

    $("#tabs").tabs('select',1);

и вкладка 1 всегда будет содержать предыдущие отображаемые данные (html ajax content), пока я не нажму на другую вкладку (например, вкладку 2), а затем обратно (на вкладку 1)... поэтому я сделал следующее:

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

и он работал:)

Ответ 11

Поскольку этот вопрос был дан много ответов в течение длительного периода времени, не помешало опубликовать обновление для более поздних версий jquery. Я использую jquery-ui 1.10.3, и предположения, которые Trevor Conn сделал, похоже, больше не действительны. Однако его подход помог мне с некоторыми изменениями. Скажем, вкладка, которую я хочу обновить, называется "tab_1" (идентификатор элемента списка).

<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, содержащий содержимое вкладки. "area-controls", возможно, было более логичным именем, но, как оперная энтузиастка, я не жалуюсь.: -)

Ответ 12

Я нашел работу вокруг этой проблемы. Пробовав все эти методы, никто из них не работал у меня. Поэтому для простоты я придумал это решение, и хотя это не самый элегантный способ, он все еще выполняет эту работу.

Сначала установите фокус на другой вкладке, а затем верните фокус на вкладку, которую вы хотите обновить.

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