Staying on current jQuery tab across post back?

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?

Lloyd Powell

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.

Eaglan Kurek

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" />

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.

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();
        }
    });
});

This solution worked for me: Source http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net/

<script type="text/javascript">
        var selTab;
        $(function () {
            var tabs = $("#tabs").tabs({
                show: function () {
                    //get the selected tab index
                    selTab = $('#tabs').tabs('option', 'selected');

                }
            });

        });

    function pageLoad(sender, args) {

        if (args.get_isPartialLoad()) {

            $("#tabs").tabs({show: function () {
                    //get the selected tab index on partial postback
                    selTab = $('#tabs').tabs('option', 'selected');

                }, selected: selTab  });

        }
    };

    </script>

You can get the current tab by doing this:

var selected = $tabs.tabs('option', 'selected');

You can then select the tab (upon completion of the POST) by doing this:

$tabs.tabs('select', selected);

Note that tab selection is 0-based indexing, so selecting 2 means selecting the third tab.

I'm not an .NET guy, but you can probably hook onto the form's submit() event and send the currently active tab to the server with your form data. In that fashion, you can simply select the proper tab on the server side when you actually generate the DOM and JS.

Something like...

$("#the_form").submit(function(){
  var $form            = $(this);
      selected_tab_idx = $("#the_tabs").tabs( "option", "selected" );
  $('<input />', {type: hidden, name: 'tab_index', value: selected_tab_idx}).appendTo( $form );
  return true;
});

来源：https://stackoverflow.com/questions/3720796/staying-on-current-jquery-tab-across-post-back

标签

ASP.NET

jquery

postback