How can i keep the selected tab selected even after postback

Question

I have some listed tab controls on my aspx form which is as below

 <div id="tabs">
    <ul>

        <li><a href="#tabs-1">Tab A</a></li>
        <li><a href="#tabs-2">Tab B</a></li>
        <li><a href="#tabs-3">Tab C</a></li>

    </ul>
<div id="tabs-1"></div>
<div id="tabs-2"><asp:Button ID="someid" runat="server"/></div>
<div id="tabs-3"></div>
</div>

The navigation on mouse click on a tab is done by the following:

 <script type="text/javascript">
    $(function () {
        $("#tabs").tabs();

    });
</script>

Now, my question is, How can i maintain the selected tab as it is even after postback. For Example, I select Tab B that contains a Button which causes a postback on click. After the postback occurs Tab A regians the foucs and i have to manually select Tab B for adjuvent operations.

Please help me to solve this problem.

Answer 1

Initialize tabs with the cookie option specified. Sample

$(function () {
   $("#tabs").tabs({ cookie: { expires: 30 } });
}); 

You need the jQuery Cookie plugin ..

Answer 2

I think this Code will help you...

<div id="tabs">
        <asp:HiddenField ID="hidtab" Value="0" runat="server" />
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>

        </ul>

        <div id="tabs-1">
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"/>
        </div>

        <div id="tabs-2">
            <asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click"/>
        </div>
    </div>

<script type="text/javascript">
        $(document).ready(function () {
            var st= $(this).find("input[id*='hidtab']").val();
            if (st== null)
                st= 0;
            $('[id$=tabs]').tabs({ selected: st});
        });
    </script>

protected void Button1_Click(object sender, EventArgs e)
{
    hidtab.Value = "0";
}

protected void Button2_Click(object sender, EventArgs e)
{
    hidtab.Value = "1";
}

Answer 3

You can track it by your URL like they did in this post . The following code is just for example and can be done a lot nicer. I used the active property from the jquery ui tabs . it works with the index of the element but perhaps its working with the #hash aswell did not test it. so in the example below i get the index of the tab and use it with active property;

<div id="tabs">
    <ul>

        <li><a href="#tabs-1">Tab A</a></li>
        <li><a href="#tabs-2">Tab B</a></li>
        <li><a href="#tabs-3">Tab C</a></li>

    </ul>
<div id="tabs-1"></div>
<div id="tabs-2"><asp:Button ID="someid" runat="server"/></div>
<div id="tabs-3"></div>
</div>

<script type="text/javascript">
    $(function () {
        var tabsOpts = {}, 
            activeTab, activeTabIndex,
            urlCheck = doucment.location.href.split('#');

        // urlCheck is an array so when there is more then one result
        // there is a hash found in the URL
        if( urlCheck.length > 1 ) {
            activeTab = urlCheck[1];

            // getting the index from the link
            activeTabIndex = $("#tabs li a[href="+ activeTab +"]").index();

            // create new object options for the tabs
            tabsOpts = { active: activeTabIndex };
        }

        $("#tabs").tabs(tabsOpts)
        .find('li a').each(function() {
            // get URL from the tab href
            var href = $.data(this, 'href.tabs');
            // set URL with the href from your tab
            document.location = href;
        });
    });
</script>

Answer 4

Client Side solution:

 <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(IniciaRequest); Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); var currentTab; function IniciaRequest(sender, arg) { var _Instance = Sys.WebForms.PageRequestManager.getInstance(); if (_Instance.get_isInAsyncPostBack()) { window.alert("Existe un proceso en marcha. Espere"); arg.set_cancel(true); } } function BeginRequestHandler(sender, args) { //Persiste el valor del indice del TAB actual del control Jquery para mantener el tab actual seleccionado luego del Postback. if ($get('hdCurrentTab') != null) { currentTab = $get('hdCurrentTab').value; } //---- } function EndRequestHandler(sender, args) { //Permite visualiza el control JQuery TAB dentro de ventanas modales AJAX. if (sender._postBackSettings.panelsToUpdate != null) { $("#tabs").tabs(); //Persiste el valor del indice del TAB actual del control Jquery para mantener el tab actual seleccionado luego del Postback. if ($get('hdCurrentTab') != null) { $get('hdCurrentTab').value = currentTab; $("#tabs").tabs({ active: currentTab }); } //---- } //---- } </script> 

HTML on Page:

 <input id="hdCurrentTab" type="hidden" value="0" /> <div id="tabs" style="width:97%;margin: auto; font-family: verdana, tahoma, arial, sans-serif; font-size: 11px;"> <ul> <li><a href="#tabs-1" onclick="$get('hdCurrentTab').value = '0';">TAB1</a></li> <li><a href="#tabs-2" onclick="$get('hdCurrentTab').value = '1';">TAB2</a></li> </ul> <div id="tabs-1"></div> <div id="tabs-2"></div> </div> 

TAB remains selected after postbacks.