JQuery -
JQuery is java-script file which provides built-in client side functionality. By including JQuery plug-in to page we can use these built-in functionality. It is just like a Header files in C, means to use JQuery functionality it is must that first we need to include JQuery plug-in to the page.
In this article, I am explaining - How to maintain selected JQuery tab during post-back?
While using JQuery tab if we are making any post-back then JQuery tab doesn't maintain selected tab. Her I am giving code to maintain JQuery selected tab in post-back.
For this, I have used HiddenField variable to maintain the value of selected tab index. To explain this, I have designed .aspx page like this-
<head runat="server">
<link href="Css/JQuery -ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<title>hi</title>
<script src="Scripts/JQuery -1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/JQuery -ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabProfile').tabs({ selected: $("#<%= hdnTabIndex.ClientID %>").val() });
});
function funHoldValue(index) {
$("#<%= hdnTabIndex.ClientID %>").val(index);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hdnTabIndex" runat="server" Value="0" />
<div id="tabProfile" style="width: 50%;">
<ul>
<li><a href="#tabsGeneralProfile">General profile</a></li>
<li><a href="#tabsEduProfile">Educational profile</a></li>
<li><a href="#tabsProfProfile">Professional profile</a></li>
</ul>
<div id="tabsGeneralProfile" style="text-align: center;">
General Profile
<br />
<asp:Button ID="btnGeneral" runat="server" Text="OK" OnClientClick="funHoldValue(0);" OnClick="btnGeneral_Click" />
</div>
<div id="tabsEduProfile" style="text-align: center;">
Educational Profile
<br />
<asp:Button ID="btnEducation" runat="server" Text="OK" OnClientClick="funHoldValue(1);" OnClick="btnEducation_Click" />
</div>
<div id="tabsProfProfile" style="text-align: center;">
Professional Profile
<br />
<asp:Button ID="btnProfession" runat="server" Text="OK" OnClientClick="funHoldValue(2);" OnClick="btnProfession_Click" />
</div>
</div>
</form>
</body>
Here we can see that, I have taken one HiddenField variable by named- hdnTabIndex.
In this code I my holding value of selected tab using this variable. I have declared one client side function by named- funHoldValue().
Using funHoldValue () function, I am setting selected tab value to HiddenField variable. In this example I have designed 3 tabs, and for holding selected tab value I am using code like this-
<asp:Button ID="btnGeneral" runat="server" Text="OK" OnClientClick="funHoldValue(0);" OnClick="btnGeneral_Click" />
Here I am passing the index for setting to HiddenField, like this-
OnClientClick="funHoldValue(0);"
OnClientClick="funHoldValue(1);"
OnClientClick="funHoldValue(2);"
After setting value to HiddenField we have to set selected tab while post-back for that I have used this code-
$(document).ready(function () {
$('#tabProfile').tabs({ selected: $("#<%= hdnTabIndex.ClientID %>").val() });
});
This code will get value from HiddenField and set that value or index as selected tab index in JQuery tab. Here output will be like this-
Thanks
