zurb foundation 5.2 - maintain tab selection / state on postabck

Question

I have an asp.net project where I am using the foundation 5.2.2 frontend. I have a page with the foundation tabs and I want to maintain the state of the selected tab on postback. The tabs are inside an AJAX panel and I gave the tabs server ID's so the page changes the id names. This allows me, in theory, to assign the selected tab from the asp.net code behind events if I need to.

Full Disclosure, I work very little with JS so please bear with me.

I have tied into the foundation callback of the tab event in the following way (as outlined in foundation docs here):

function pageLoad(sender, args) { 
    $(document).foundation({
        tab: {
            callback: function (tab) {
                var selectedTab = $('#tabs').tabs('option', 'active');
                $("#<%=currentTab.ClientID%>").val(selectedTab);
            }               
        }
    });       
}

I need to use the pageload event because pageLoad is executed after every postback, synchronous or asynchronous. Also, pageLoad is a reserved function name in ASP.NET AJAX that is for this purpose.

My idea is to place a hiddenfield on the page to hold the current tab selections:

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

But when the callback happens, the selected tab id is not assigned to the hidden field but rather the following is assigned :

[object Object]

<input type="hidden" name="dnn$ctr2601$StoreManagement$currentTab" id="dnn_ctr2601_StoreManagement_currentTab" value="[object Object]">

Question

I need some help from here, how do I get the selected tab ID or value and then how do I reassign this value?

Any help is appreciated.

I am aware of this question Zurb-Foundation Maintain Tab State but it uses an older version of foundation and I wanted to use the built in callback

TAB HTML

<div class="row">
    <div class="large-12 columns">
        <asp:HiddenField runat="server" ID="currentTab" Value="0" />

        <dl class="tabs" id="MyTabs" data-tab>
            <dd id="Tab2" runat="server" class="active">
                <asp:HyperLink runat="server" ID="Tab2Link">Categories</asp:HyperLink></dd>
            <dd id="Tab3" runat="server">
                <asp:HyperLink runat="server" ID="Tab3Link">Status</asp:HyperLink></dd>
            <dd id="Tab4" runat="server">
                <asp:HyperLink runat="server" ID="Tab4Link">Specifications</asp:HyperLink></dd>
            <dd id="Tab5" runat="server">
                <asp:HyperLink runat="server" ID="Tab5Link">Manufacturers</asp:HyperLink></dd>
            <dd id="Tab6" runat="server">
                <asp:HyperLink runat="server" ID="Tab6Link">Suppliers</asp:HyperLink></dd>
            <dd id="Tab1" runat="server">
                <asp:HyperLink runat="server" ID="Tab1Link">Terms</asp:HyperLink></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel2" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel3" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel4" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel5" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel6" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel1" runat="server">
                ...Tab content
            </div>
        </div>
    </div>
</div>

The hyperlink in the Tab has its href attribute set in the code behind of the asp.net page - it gets the clientid of the panel and prepends the #. The tabs work and switch just fine, I just need to maintain the sate across postback.

Answer 1

It looks like if you add data-options="deep_linking: true" to the like so:

<dl class="tabs" id="MyTabs" data-tab data-options="deep_linking: true">

it will add the tab panel id to the window hash which the tabs pick up, so on postback the url is read and teh hash is used to reassign the last tab selected.

Much more simple than the javascript solution.

NOTE:

this will not work if you remove the deep_linking option from the data-options