Jquery tabs – maintaining selected tab during postback

I am sure Jquery tabs made everyone think twice before he opts for Ajaxtoolkit tabcontainers. I thought the same before implementing it in a .Net 2.0 web application.  Only issue i faced was that after each postback selected tab index is set to default.  So i had to find a work around which can be very handy at times.

.aspx code:


<!-- this field stores tab index -->

<asp:HiddenField runat="server" ID="selectedTab" />

<div id="myTabs" style="width: 500px;">
 <ul>
 <li><a href="#tab-1">Tabs</a></li>
 <li><a href="#tab-2">AutoComplete</a></li>
 </ul>
 <div id="tab-1">
 <asp:Button runat="server" ID="btnTest" Text="Do PostBack" OnClick="btnTest_Click" />
 </div>
 <div id="tab-2">

 </div>
 <asp:Button runat="server" ID="btnPostBack" Text="Do PostBack2" OnClick="btnPostBack_Click" />
 </div>
 </div>

jquery script:


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

// <!-- Tabs script -->

var indx = $('#' + '<%= selectedTab.ClientID %>').val();

if (indx == '') {
 $("#myTabs").tabs({ selected: 0 });
 $('#' + '<%= selectedTab.ClientID %>').val('0');
 }
 else {
 $("#myTabs").tabs({ selected: indx });
 $('#' + '<%= selectedTab.ClientID %>').val(indx);
 }

$("#myTabs").tabs({
 select: function (event, ui) {
 $('#' + '<%= selectedTab.ClientID %>').val(ui.index);
 }
 });
 // tabs script ends

});

</script>

I am storing tab index in a hidden variable  and after every post back restore it. It is being handled by Select event of jquery Tabs API.  for more info please refer to the documentation at jquery site. http://docs.jquery.com/UI/Tabs#events 

I hope it is useful.

Advertisements

About saxenapraveen

I work with Microsoft and have 12 years of experience in developing,designing and leading reliable and scalable solutions for cloud and device ready businesses.

Posted on February 28, 2012, in .NET and tagged . Bookmark the permalink. 5 Comments.

  1. You’re a code God! I have read like 20 other solutions and yours is the only really solution…

  2. You’re a code God! I have read like 20 other want to be solutions and yours is the only really solution… It is easy to implement and work perfectly!

  3. you are great man…

  4. Shridhar Wakhare

    I have updated this with latest one….

    //

    var indx = $(“#hfSelectedTab”).val();

    if (indx == ”) {
    $(“#tabs”).tabs({ active: 0 });
    $(“#hfSelectedTab”).val(‘0’);
    }
    else {
    $(“#tabs”).tabs({ active: indx });
    $(“#hfSelectedTab”).val(indx);
    }

    $(“#tabs”).tabs({
    activate: function (event, ui) {
    $(“#hfSelectedTab”).val($(“#tabs”).tabs(“option”, “active”));
    }
    });
    // tabs script ends

    • Shridhar,
      I did not get a chance to test your code but it seems a better/trimmed version. but I have a question You are using activate event rather than select event and you are not using ui.index parameter at all.

      Is there any good reason to use this event Activate over Select? It would be helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: