如何在jQuery UI Tab中重新加载AJAX内容

Question

我正在尝试将Ajax内容刷新到jQuery UI选项卡中。 我见过很多人问，并提出了很多解决方案（尽管他们都不完整或不起作用），所以再说一次……这是怎么做的？

这是我所拥有的：

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

....

我什至愿意接受对ajax调用的JSON响应，但是简单地重新加载选项卡就足够了。

我会杀了一些像样的jQuery文档。 除了鼓励盲目复制和粘贴外，提供的示例实际上还不够完善，无法做任何事情。

我看到了对.load函数的引用，但没有有关如何或在何处使用它的示例。 我已经看到了对“绑定到click事件的引用”，但是同样，它处于没有ajax的情况。

如何使用ajax完成“极其简单”任务？ 我的意思是真的吗？ 没有像好的ol框架那样等同于“目标”？

吮吸麋鹿脚趾。

Answer 1

好的，放在一起，我为jquery选项卡的click事件准备了这个，周围的div有一个选项卡的id，像这样：

<div id="tabs"> 

在文档准备功能中执行以下操作：

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

它为每个选项卡注册click事件，并通过Scott Scott来记录选项卡的索引

我在文档中也准备好防止缓存

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

如果我对问题的理解正确，则应该能够使用jQuery的.load( )方法并将选项卡的content元素用作目标。

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， .eq(0) ）

此外，这似乎对您来说是一个很好的资源... http://docs.jquery.com/UI/Tabs

特别是在这里http://docs.jquery.com/UI/Tabs#Ajax_mode

Answer 3

我最终使用了文档中概述的“ 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”类（或您要分配的任何类名），则该链接将在选项卡外部打开。