javascript - 如何在 jQuery UI 选项卡中重新加载 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 函数的引用，但没有说明如何使用或在何处使用它的示例。我已经看到“绑定(bind)到点击事件”的引用，但同样，它是在没有 ajax 的情况下。

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

吸驼鹿脚趾。

Answer 1

好的，把这些放在一起我有这个用于 jquery 选项卡的点击事件，周围的 div 有一个选项卡的 id，像这样:

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

内容总是在同一个目标中更新。当然，您可以将它绑定(bind)到不同的事件。