jQuery UI tab selection method doesn't work
Zach
I have two tabs, each with a submit button. After the button is clicked, I need to reload the content of that particular tab to get the updated data from the server.
if (validStatus()) {
$.ajax({
//...
success: reloadTab
});
}
function reloadTab() {
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
When the button is clicked, the tabs do not refresh. I see the first alert but not the second.
HTML is as follows:
head:
<link rel="stylesheet" href="@this.Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" />
<script>
$(function () {
$("#tabs").tabs();
});
</script>
body:
<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>
Zach
Originally tabs.('select', ...)
deprecated, tabs.('option', 'active', index)
fixed my issue. Solution found in this comment : https://stackoverflow.com/a/16033969/1463649