Обновление содержимого вкладок по щелчку во вкладках пользовательского интерфейса JQuery - PullRequest
Новая
       67

Обновление содержимого вкладок по щелчку во вкладках пользовательского интерфейса JQuery

12 голосов
/ 28 октября 2009

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

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

Изменить: 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>

Ответы [ 12 ]

18 голосов
/ 26 июля 2011

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

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

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

9 голосов
/ 19 ноября 2010

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

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

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

var href = "/alert/index/";  
$("#alert-tab").load(href);
4 голосов
/ 22 мая 2014

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

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

2 голосов
/ 17 февраля 2012

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

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

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

2 голосов
/ 08 октября 2011

Вот как я это сделал. Следует отметить, что я обнаружил, что идентификаторы, назначенные DIV, отображающим содержимое каждой вкладки, достаточно предсказуемо и всегда соответствуют значению якоря на выбранной вкладке. Это решение зависит от того, как обстоит дело, поэтому его можно критиковать как «слишком хрупкое», я полагаю. Форма, из которой я извлекаю код, является своего рода элементом многократного использования, который может размещаться или не размещаться на вкладке, поэтому я проверяю значение 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);
              });
          }
    });
}
1 голос
/ 12 апреля 2012

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

<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.");
        }
    }
});
1 голос
/ 20 мая 2011

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

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;
})
1 голос
/ 05 января 2010

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

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

Я исправил это с помощью какой-то глупой работы, но это было эффективно.

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

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

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

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

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

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

0 голосов
/ 27 апреля 2015

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

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

$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1);
0 голосов
/ 10 октября 2014

Поскольку на этот вопрос много раз отвечали в течение длительного периода времени, было бы неплохо опубликовать обновление для более свежих версий jquery. Я использую jquery-ui 1.10.3, и предположения, сделанные Тревором Конном, похоже, уже не верны. Однако его подход помог мне с некоторыми изменениями. Допустим, вкладка, которую я хочу обновить, называется "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, содержащего содержимое вкладки. «контроль области» мог бы быть более логичным, но я не жалуюсь как оперный энтузиаст. : -)

Страница:
...