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

它为每个标签注册了点击事件，感谢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."); 
    } 
} 
});

内容始终在同一目标中更新。你当然可以把它绑定到另一个事件上。

Answer 2

如果我正确理解了这个问题，你应该能够使用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

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”类（或您要分配的任何类名），该链接将在标签外打开。

如何在jQuery UI选项卡中重新加载AJAX内容

3 个答案: