Sunday, October 14, 2012

How to maintain selected JQuery tab during post-back?


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-


JQuery Tabs




Thanks


No comments:

Post a Comment