Staying on current jQuery tab across post back?

Question

I am using jQuery tabs and an ASP.NET listview to display and edit some information. My problem is that when a user inserts a new record in one of the listview items my jQuery tabs go back to the first tab. Is there a way to keep track of which tab I am on or keep it from resting on post back?

Answer 1

In ASP.NET, you can store it in a hidden field without having to use a cookie (no need for the jQuery cookie reference).

Use this:

$(function () {
    $("#tabs").tabs({ 
        activate: function() {
            var selectedTab = $('#tabs').tabs('option', 'active');
            $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
        },
        active: <%= hdnSelectedTab.Value %>
    });
});

Then in the body, declare your hidden tab field:

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

Basically, on selection of a tab you are storing the selected tabs value in the asp hidden field. Then on show you are retrieving the value.

Answer 2

With newer versions of jQuery and jQuery UI, this will be:

$(function () {
    $("#tabs").tabs({
        activate: function() {
            var selectedTab = $('#tabs').tabs('option', 'active');
            $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
        },
        active: document.getElementById('<%= hdnSelectedTab.ClientID %>').value
    });
});

The 'selected' option is replaced by 'active'... Of course you will still need to add the hidden field:

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

Answer 3

There's built-in support for the jQuery cookie plugin (direct download). You use it like this:

$("#tabs").tabs({
  cookie: { expires: 7 }  //1 week
});

It's not the same as maintaining across postback, but it usually provides the desired effect.

Answer 4

Try this:

Add to the page :

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

Add to the script:

$(function () {
    var activeIndex = parseInt($get("hdnSelectedTab").value);
    $("#tabs").tabs({
        active: activeIndex,
        activate: function (event, ui) {
            $get("hdnSelectedTab").value = ui.newTab.index();
        }
    });
});