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

Question

Содержимое TAB1 загружается ajax с удаленного URL. Когда TAB1 выбран, мне нужно переключиться на TAB2, а затем вернуться к TAB1, чтобы обновить загруженный контент.

Как сделать TAB1 обновленным загруженным контентом при нажатии на его вкладку?

Edit: 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> 

Answer 1

На "успех" вызова JQuery, вы можете заменить HTML с новым HTML.

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

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

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

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

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

Edit 2

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

Извините.

Answer 2

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

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

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

Я взял все из моего ФЛОТ кода и расслоение плотной сбрасывали его в отдельный .js файл и поместить его в функции

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

я тогда следующее на вкладке

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

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

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

Answer 3

1) При определении своих вкладок, загружающих контент ajax, обязательно используйте атрибут title, который помещает это значение в id загруженного div. В моем случае название было «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); 

Answer 4

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

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

Answer 5

Другой простой способ обновить вкладку в JQuery является использование метода загрузки:

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

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

Answer 6

Вот как я это сделал. Следует отметить, что я нашел идентификаторы, назначенные 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); 
       }); 
      } 
    }); 
} 

Answer 7

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

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

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

Answer 8

Ok положить вещи вместе я это за клик случае вкладок JQuery, окружающая ДИВ имеет идентификатор вкладки, например:

<div id="tabs"> 

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

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

Answer 9

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

У меня есть модальное диалоговое окно с 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); 

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

Answer 10

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

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

Answer 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> 

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

Answer 12

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

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

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