Как перезагрузить AJAX-контент в jQuery UI Tab

Question

Я пытаюсь обновить содержимое Ajax на вкладке пользовательского интерфейса jQuery. Я видел много людей, которые спрашивают, и много предложенных решений (хотя все они неполные или не работают) так еще раз ... как это сделать?

Вот что у меня есть:

<script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                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." );
                }
            }
        });
    });

    </script>


<div class="demo">

<div id="tabs">
    <ul>

        <li><a href="/vendor/tab_vendorInfo.cfm" title="vendor">Vendor Info</a></li>
        <li><a href="/vendor/tab_vendorDelivery.cfm" title="delivery">Delivery</a></li>
        <li><a href="/vendor/tab_vendorProducts.cfm" title="products">Products</a></li>
        <li><a href="/vendor/tab_vendorRequests.cfm" title="requests">Requests</a></li>
    </ul>
    <div id="tabs-1">

    </div>
</div>

</div><!-- End demo -->


**** 
and in one of the panels, I'd like to be able to reload the panel, passing additional parameters in the query string
such as:

<!--- panel 4 --->

Here is some content that would show initially.
If you click this <a href="panel4.cfm?catID=1">category</a> it will reload the href INTO the current tab

<!--- end panel 4 ---->

....

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

Я бы убил за несколько приличных документов jQuery. Приведенные примеры действительно не достаточно полны, чтобы что-либо делать, кроме как поощрять слепое копирование и вставку.

Я видел ссылку на функцию .load, но нет примера того, как и где она используется. Я видел ссылку на «привязку к событию click», но, опять же, это происходит без ajax.

Как эта ЧРЕЗВЫЧАЙНО ПРОСТАЯ задача выполняется с ajax? Я имею в виду на самом деле? нет эквивалента «цели», как хорошие старые кадры?

это сосет пальцы ног лося.

Answer 1

Хорошо, собрав все воедино, у меня есть это для события 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."); 
    } 
} 
}); 

Содержание обновляется всегда в одной и той же цели. Конечно, вы можете связать это с другим событием.

Answer 2

В итоге я использовал метод 'hijax', изложенный в документации. Вот код, который я использовал:

<script>
$(function() {
    $( "#tabs" ).tabs({
    //define ajax options, since they do it in the demo!
    // not sure why,what, or if its needed <br>
    //commented examples sure wouuld eilimate half of the forum posts!
    ajaxOptions: {
            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." );
            }
        },


    //make sure to include a comma between the ajaxoptions, and the load options
    //this is the bit that makes all a link with the class of 'thisPane' stay within the tab
    //a href tags that are not of the class 'thisPane' will open outside the tab
    load: function(event, ui) {
    $(ui.panel).delegate('a.thisPane', 'click', function(event) {
        $(ui.panel).load(this.href);
        event.preventDefault();
    });
    }


    });
});

</script>

• Информация о продавце
• Доставка
• Продукты
• Запросы

и вот ссылка на одной из страниц (вкладка 4), которую мне нужно было «перезагрузить»: (в основном для разбивки набора записей на вкладке)

<a href="tab_vendorRequests.cfm?next=6" class="thisPane">page 1</a>

и если вы не включите класс thisPane (или любое другое имя класса, которое хотите назначить), ссылка откроется вне вкладок.

Answer 3

Если я правильно понял вопрос, вы сможете использовать метод jQuery .load( ) и использовать элемент содержимого вкладки в качестве цели.

var tab = $('div.ui-tabs-panel').eq(0);
tab.find( 'a' ).bind( 'click', function( event )
{
   var link = $(this);
   tab.load(link.attr( 'href' ));
   event.preventDefault();
});

Где .eq(0) будет вкладка, которую вы хотите (0 для первой вкладки, 1 для второй и т. Д., И т. Д.)

Кроме того, это хороший ресурс для вас ... http://docs.jquery.com/UI/Tabs

Особенно здесь http://docs.jquery.com/UI/Tabs#Ajax_mode