Question

我对编程很新，所以请原谅我的无知。我正在为我的应用程序使用优秀的jQuery选项卡，我通过ajax将外部内容加载到选项卡中，并且在其中一个选项卡中，我需要以编程方式重新加载该选项卡的内容。我按照文档*无效。

我已经使用以下命令初始化了我的根页面中的标签：

使用Javascript：

  $(document).ready(function(){
    $("#tabs").tabs({ cookie: { expires: 30 } });    
  });

HTML：

<div id="tabs">
<ul>
     <li><a href="#moderatorManage"><span>Find and Manage Moderators</span></a></li>
     <li><a href="flaggedCards/" id="flaggedCards" ><span>Flagged Cards</span></a></li>
     <li><a href="pendingDelete/"><span>SinBin / Pending Delete</span></a></li>
</ul>
</div>

你可以看到我加载了一个“flaggedCards /”的外部URL在那里我有更多jQuery使用这个函数：

    $(document).ready(function(){
        $("#controls_{{id}} input").click(function() {

                $(this).parent().parent().parent().addClass("highlight").fadeTo("slow", 0.1);
                $("#tabs").tabs( 'load' , 0 ); // fails also tried various selectors

        });
 });

我正在尝试做的是，当调用该函数时调用flaggedCards选项卡重新加载，我尝试了各种不同的语法无济于事。

docs.jquery.com/UI/API/1.7.1/Tabs#method-load

Answer 1

我能够复制您在帖子中报告的完全相同的问题。这就是我最终解决它的方式。

在托管标签的根页面中，添加以下功能：

function selectTab(index){
 $("#tabs").tabs('load', index);
}

然后在您的外部网址页面“flaggedCards /”中，替换以下行：

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

用这个：

selectTab(0);

我不知道为什么这个解决方法可以解决问题。也许这是一个错误。

Answer 2

要执行脚本，您必须确保ajax请求的数据类型为“html” - 请参阅$.ajax options。为此，请在设置标签时尝试标签ajaxOptions选项。

$("#tabs").tabs({ cookie: { expires: 30 }, ajaxOptions: {dataType: "html"} });

另一个问题可能是，当通过ajax加载选项卡内容时，$(document).ready(function(){可能没有触发。尝试删除它和相应的}。当它通过ajax加载你的内容时，希望它在文档被删除之前将它插入到文档中。

我没有想法。希望有所帮助： - ）

Answer 3

我应该提一下，它正在运行它加载的html中的脚本，请参阅addclass函数，该函数运行正常，但是在运行之后它不会使用我输入的代码重新加载选项卡。我会尝试添加该数据类型。

以编程方式在jQuery Tab中重新加载ajax内容

3 个答案: