我有两个选项卡,每个选项卡上都有一个提交按钮。单击按钮时,我需要重新加载该特定选项卡的内容以从服务器获取更新的数据。
if (validStatus()) {
$.ajax({
//...
success: reloadTab
});
}
function reloadTab() {
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
单击按钮时,选项卡不会刷新。我看到第一个警报,但没有看到第二个。
HTML如下:
头:
<link rel="stylesheet" href="@this.Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" />
<script>
$(function () {
$("#tabs").tabs();
});
</script>
身体:
<div id="tabs">
<ul>
<li><a href="#Tab1" title="Tab1">The first tab</a></li>
<li><a href="#Tab2" title="Tab2">the second tab</a></li>
<li><a href="#Success" title="Success">Success</a></li>
</ul>
<div id="Success">
testing
</div>
<div id="Tab1">
<fieldset >
<legend>Overview</legend>
<input type="button" id="submit1" value="submit" />
<br />
</fieldset>
<fieldset style="width: 700px;">
<legend>Overview</legend>
<div>
<table >
//updated with ajax
</table>
</div>
</fieldset>
<script>
//reloadTab is in here
</script>
</div>
<div id="Tab2">
<fieldset style="float:left; width:300px;">
<input id="submit2" type="button" value="submit"/>
</fieldset>
<fieldset style="float:left;">
<legend>Overview</legend>
<table>
//updated with ajax
</table>
</fieldset>
<script>.....</script>
</div>