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?

score 36 · Accepted Answer · edited May 07 '19 at 19:47

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.

Great solution, thank you! I had to change the "active:" option to ... $("#<%= hdnSelectedTab.ClientID %>").val() — deebs, Sep 02 '20 at 15:14

score 30 · Answer 2 · edited May 07 '19 at 19:46

30

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

edited May 07 '19 at 19:46

TylerH

20,799
66
75
101

answered Mar 24 '13 at 21:40

Eaglan Kurek

305
3
5

3

`active: document.getElementById('<%= hdnSelectedTab.ClientID%>').value` – Bachask8 May 22 '14 at 15:06

score 4 · Answer 3 · answered Sep 15 '10 at 18:58

4

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.

answered Sep 15 '10 at 18:58

Nick Craver

623,446
136
1,297
1,155

score 2 · Answer 4 · answered Mar 25 '14 at 22:53

2

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

answered Mar 25 '14 at 22:53

Olegs

21
1

I think it is better using $("#<%=hdnSelectedTab.ClientID%>") – Joshua Son Dec 03 '16 at 00:02

score 1 · Answer 5 · answered Nov 09 '13 at 11:37

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>

score 0 · Answer 6 · answered Sep 15 '10 at 19:11

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.

score 0 · Answer 7 · answered Sep 15 '10 at 19:12

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

score 0 · Answer 8 · answered May 20 '20 at 17:33

I am using jquery 3.5.0 and jqueryui 1.12.1 from the cloudflare CDN.

In .NET >= 3.5 you can use the Ids without the <%= hdnSelectedTab.ClientID %> This was needed way back when .net mangled names.

So in your.js the following is working for me:

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

// in my js file 
$("#OpsManage").tabs({
        activate: function () {
        var selectedTab = $('#OpsManage').tabs('option', 'active');
        $("#hdnSelectedTab").val(selectedTab);
        },
    active: $("#hdnSelectedTab").val()
});

/// ********

This goes a little beyond the OP. However, I had need to maintain tab and scroll:

//aspx side
<asp:HiddenField ID="hdnScrollPosition" runat="server" Value="0" />


// js file (inside ready)
var scroll = $('#hdnScrollPosition').val();
$('html').scrollTop(scroll);

/* maintain scroll across partial postbacks */
$(window).scroll(function (event) {
    scroll = $(window).scrollTop();
    $('#hdnScrollPosition').val(scroll);
});

Staying on current jQuery tab across post back?

8 Answers8

Linked