I have a form which contains tabs and sub tabs as given below:
<div id="tabs">
<ul>
<li><a href="#tab_details">Details</a></li>
<li><a href="#tab_dia">DIA</a></li>
</ul>
<div id="tab_details">
<code>
</div>
<div id="tab_dia">
<div id="dia_sub_tabs">
<ul>
<li><a href="#DIA_details">DIA Details</a></li>
<li><a href="#IA_info">IA Information</a></li>
</ul>
<div id="DIA_details">
<code>
</div>
<div id="IA_info">
<code>
</div>
</div>
</div>
</div>
I am saving the data for each of the tabs separately on button click from my form using javascript:
<span><a href="javascript:void(0)" id="save_changes_id" class="button_links">Save Changes</a></span>
The JS code is as follows:
$("#save_changes_id").click(function() {
// To retrieve the current TAB and assign it to a variable ...
var curTab = $('.ui-tabs-active');
var curTabPanelId = curTab.find("a").attr("href");
if(curTabPanelId == "#tab_dia"){
var curTab = $('#dia_sub_tabs .ui-tabs-active');
var curTabPanelId = curTab.find("a").attr("href");
}
responseData = doAjaxCall($(curTabPanelId + " form"));
if(responseData == 1)
showMessage('status_msg', 'Project details updated successfully', 'green');
else
showMessage('status_msg', 'Error: Please check all the fields', 'red');
});
What I wanted was to reload the page each time I click on save button and show the active tab from which I had given save after reload.
I tried giving window.location.reload() , but was showing the first tab after reload and not the tab which was active before.
Please suggest a solution for this. Thanks in advance.