Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

Few months ago I've been seeing many users in the forums asking how to retain the selected tab in JQuery Tab across postbacks, so I've decided to write this post as reference to others who might encounter this kind of scenario.

To describe the scenario, lets go a head and create the HTML mark up and construct the tabs. Here’s the markup below:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>JQuery Demo</title> 
       <link href="jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

                  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
                  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

                  <script type="text/javascript">
                        $(function() {
                              $("#tabContainer").tabs(); 
                        });
                  </script>

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="tabContainer"> 
       <ul> 
         <li><a href="#tab0"><span>FIRST</span></a></li> 
         <li><a href="#tab1"><span>SECOND</span></a></li> 
         <li><a href="#tab2"><span>THIRD</span></a></li> 
       </ul> 

       <div id="tab0" > 
               <asp:Button ID="Button1" runat="server" 
                           Text="First Tab Button" /> 
       </div> 
       <div id="tab1"> 
               <asp:Button ID="Button2" runat="server" 
                           Text="Second Tab Button" /> 
       </div> 
       <div id="tab2"> 
               <asp:Button ID="Button3" runat="server" 
                           Text="Third Tab Button" /> 
       </div> 
    </div> 
    </form> 
</body> 
</html> 

 

 

As you can see,there’s nothing fancy about the markup above. Running the code above will display 3 tabs on in the page as shown below.

The above set up is fine if you are only displaying information within each tabs, but if you are going to place a server control ( like Button,DropDownList,LinkButton, etc.)  that creates a postback then that is where the issue comes in. So for example you are at the second tab and you click on the button within that tab, you will notice that after it postbacks the selected tab index will reset to default tab which in this case in the first tab.

Why?

Basically, the reason for this is that every time you do a postback to the server the page will be recreated and script you created for generating the tab at the client will be processed again and thus the tabs will revert back to its default settings.

The Workaround

As a workaround, I’m going to use a HiddenField server control for storing the selected tabIndex so that when a server control creates a postback, we can easily set the tabIndex at the server (code behind) and reference the value at the client side (Javascript) for retaining the selected tab.

Here are the code blocks below:

ASPX:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>JQuery Demo</title> 
       <link href="jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> 
 

                  <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js type="text/javascript"></script> 
                  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

                   <script type="text/javascript"> 
                        $(function() {

                 $("#tabContainer").tabs();

                        var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();

                        $("#tabContainer").tabs({ selected: currTab });

             });

                  </script>

</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:HiddenField runat="server" ID="HFCurrTabIndex" /> 

    <div id="tabContainer"> 
       <ul>
         <li><a href="#tab0"><span>FIRST</span></a></li>
         <li><a href="#tab1"><span>SECOND</span></a></li>
         <li><a href="#tab2"><span>THIRD</span></a></li>
       </ul>

       <div id="tab0" >
           <asp:Button ID="Button1" runat="server" 
                       Text="First Tab Button"
                       onclick="Button1_Click" />
       </div>

       <div id="tab1">
           <asp:Button ID="Button2" runat="server" 
                       Text="Second Tab Button"
                       onclick="Button2_Click" />
       </div>

       <div id="tab2">
           <asp:Button ID="Button3" runat="server" 
                       Text="Third Tab Button"
                       onclick="Button3_Click" />

       </div>
    </div>
    </form> 
</body> 
</html> 

 

CODE BEHIND:

public partial class JqueryTabDemo : System.Web.UI.Page 
{ 
       private enum TabIndex{ 
           DEFAULT = 0,
           ONE = 1,
           TWO = 2,
           THREE = 3
           // you can as many as you want here
       } 
       private void SetSelectedTab(TabIndex tabIndex) { 
           HFCurrTabIndex.Value = ((int)tabIndex).ToString();
       } 

       protected void Page_Load(object sender, EventArgs e) { 

       } 

       protected void Button1_Click(object sender, EventArgs e) { 
           SetSelectedTab(TabIndex.DEFAULT);
       } 

       protected void Button2_Click(object sender, EventArgs e) { 
           SetSelectedTab(TabIndex.ONE);
       } 

       protected void Button3_Click(object sender, EventArgs e) { 
           SetSelectedTab(TabIndex.TWO);
       } 
}


As you can see, the code above is very straight forward and self explanatory. The most important part there is to call the SetSelectedTab() method in the event that causes a postback to the server.

 

That simple! I hope someone find this post useful!

 

Technorati Tags: ,,
Posted on Friday, July 9, 2010 4:22 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
I was struggling with my tab focus for two days.Your post solved that.Thanks a lot.
Left by Agnes Loyola on Dec 02, 2010 3:19 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
When I used the Tabsrtip inside the update panel the tabstrip is not retaining to the position.
Left by Agnes Loyola on Dec 03, 2010 11:09 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
@Agnes,

Check your javascript and see if the HiddenField value is correct.
Left by Vinz on Dec 03, 2010 11:21 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
I checked my javascript its taking the value as 1 only but the focus is setting on the default tab.
Left by Agnes Loyola on Dec 04, 2010 7:52 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
The problem solved atlast.
I more query ,when I select a radiobutton in the gridview of TAB1 and then moved to TAB2 and when I am back to TAB1 the selection remains there.How do I deselect the radio button on moving to another tab?
Left by Agnes Loyola on Dec 13, 2010 5:49 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
Simple and to the point .. Good Job
Left by Raj on Mar 20, 2011 9:25 AM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
Hey dear friends i am still unable to get rid of post back problem in jquery tabs... i have tried the above code and many other examples too but problem still persists.... plz help me out...i m running out of my mind....thanks and regards
Farhan
Left by Farhan Abbas on Jun 16, 2011 8:52 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
Thanks a lot!!
Left by Mandar on Aug 16, 2011 9:28 AM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
You can use cookie

<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs({ cookie: { expires: 30} });
});

</script>
Left by Fabio Galante on Sep 23, 2011 8:54 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
grest tip - thank you
Left by steve mandel on Dec 07, 2011 3:26 AM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
nicly done, but is there a way to hide a certain tab and its contents. I tried this and could only hide a particular tabs content so thats fine but i want to hide the tab name across the top also.
Left by ron on Mar 12, 2012 7:04 AM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
Great work around. However is there a way to keep the tab selected if it contains an ASP Grid View with a select. Here's what I tried:

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e){
SetSelectedTab(TabIndex.TWO);

}


This doesn't keep it in tab-2 where it should be but returns it to the first tab. It works with Buttons though. What am I doing wrong?
Left by Henry on Mar 15, 2012 4:10 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
thanks alot, it worked for me
Left by abdul samathu on Apr 26, 2012 6:50 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
It's really very useful and nice article
Left by Vidisha on Aug 22, 2012 4:00 PM

# re: JQuery Tab with menu in asp.net
Requesting Gravatar...
I am using jQuery tab in asp.net website and under each tab i have a menu which i am using to load pages using AJAX under each tab. Basically multiple pages can be loaded under same tab. I am facing issues while shifting between tabs. If i navigate to a tab other than the default tab and select a page from menu, it gets reset back to the default tab. The hidden field solution is not working.
Left by shajina on Nov 23, 2012 6:30 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
I have a page menu.aspx that uses a master page.

The <script>tag is in the master page. when i m using the hiddenfield in the master page...it says it doesnt not exit in the page behind of the menu.aspx page....

i have also tried putting it behind the masterpage.cs...the hidden field is visible in that page....but the effect is not seen on the page..

Kindly help
Left by shailesh on Jan 24, 2013 7:46 PM

# re: JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET
Requesting Gravatar...
good explanation. Thank u ... Keep posting Gud Luck!!!
Left by navatha on Jan 27, 2013 11:48 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free