jQuery-UI 选项卡不刷新动态内容

Question

我正在使用 jQuery-UI 选项卡 - 总共五个。选项卡 1 有一个提交到 MySQL（通过 AJAX）的输入表单。选项卡 2 根据通过选项卡 1 输入的内容从 MySQL 中提取数据。当我从选项卡 1 单击到选项卡 2 时，我希望刷新第二个选项卡。由于与其他代码的一些冲突，我无法使用 jQuery-UI API 上宣传的外部文件。我正在使用以下内容：

这是我的 JS：

$(function() {
   $("#tabs3").tabs();
   $("#tabs3").on('click','li',function(event,ui) {
       $("#tabs3").tabs("load", "active");
   });            
});

这是我的 HTML：

<div id="tabs3">
<ul class="no-print">
    <li><a href="#tabs-1">Enter Report</a></li>
    <li><a href="#tabs-2">My Reports</a></li>
</ul>  
<div id="tabs-1">
<form name="form" id="form" method="post" action="scripts.php" novalidate>
    // form inputs
</form>
</div>
<div id="tabs-2">
<h4>My Reports</h4>
<?php

// PHP scripts that spits out the output
</div>

我该怎么做才能使当我从一个选项卡单击到下一个选项卡时，它会刷新内容？我不反对每个标签刷新，但如果不困难的话，我想选择哪些刷新，哪些不刷新。

Answer 1

如果您不使用源来加载标签页，您将需要手动刷新您需要刷新的任何内容，或者通过 ajax 检索标签页？

但是，您想要接近那部分取决于您。但所有这些都可以在 jquery ui 选项卡回调“beforeActivate”中完成。然后在参数中您可以确定它是哪个选项卡并继续刷新该点的内容。

 $(function() {
     $( "#tabs" ).tabs({
        beforeActivate: function( event, ui ) {}
     });

});

参考：http://api.jqueryui.com/tabs/#event-beforeActivate

还有一个简单的小提琴 http://jsfiddle.net/zjrag3x0/