Retain Jquery Tabs current tab across the asp.net post back




Retain JQuery Tab’s  current tab across the asp.net post back. We need to use a hidden field here to save the current tab index so we can retrieve it back on the post back. JQuery Rocks  and flying high.

ASP.Net code
<asp:HiddenField ID=”hidLastTab” runat=”server” />
<div id=”tabs”>
<ul>
<li><a href=”#academicclass”>Academic Class</a></li>
<li><a href=”#academicyear”>Academic Year</a></li>
</ul>
<div id=”academicclass”>
First Tab
<asp:Button ID=”Button1″ runat=”server” Text=”Post” />
</div>
<div id=”academicyear”>
Secon Tab
<asp:DropDownList ID=”DropDownList1″ runat=”server” AutoPostBack=”true”>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</div>
</div>

JQuery Code

<script type=”text/javascript”>
$(document).ready(function() {
var index = 0;
var tabIndex = $(‘#<%= hidLastTab.ClientID %>’).val();
if (tabIndex != ”) {
index = tabIndex;
}
$(“#tabs”).tabs({
select: function(event, ui) {
$(‘#<%= hidLastTab.ClientID %>’).val(ui.index);
},
selected: parseInt(parseInt(tabIndex))
});

});
</script>




Further help can be found here http://docs.jquery.com/UI/API/1.8/Tabs

If you are using JQuery tabs inside update panel then you have to re-initialize your tab control

function pageLoad(sender, args) {

if (args.get_isPartialLoad()) {
setAccordion();
setTabs();

}

}

Tags:

Comments are closed.