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?

回答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.

回答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'... Ofcourse you will still need to add the hidden field:

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

回答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.

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

回答5:

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>

回答6:

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.

回答7:

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