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 tabs回调“beforeActivate”中完成。然后在参数中，您可以确定它是什么标签，然后在此时刷新内容。

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

});

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

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

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

1 个答案: