asp.net bootstrap Keep current active tab after post-back event

Question

I have the following asp.net aspx code

<asp:LinkButton  CssClass="form-search" ID="LinkButtonSearch"  runat="server">Search</asp:LinkButton>

<br />

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>

This script code keeps the active tab after post-back event when i click on the LinkButton

<script>
  $(document).ready( function(){
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
  });
</script>

NB: This code works fine only when i reload the current page. It keeps the current tab focus. but when u click on the Link Button, it takes me back to the default tab.

How can make this code also work on the post back event of any controls.

Note: i took this example from the stack post : How do I keep the current tab active with twitter bootstrap after a page reload? . This solution has been posted by: @koppor.

Any helps

Hi @Djama, I think you have a problem where you are trying to show the last tab. Put your code inside the $(document).ready() function. It's the 3rd step on my prior answer stackoverflow.com/questions/21136981/…. — aledpardo
@aledpardo a edited the script but i am still having the same problem, nott keeping the current tab after the postback. You said i have a problem where i am trying to show the last tab , can you be more explicit — Djama

Bankyiie Bankyiie · Accepted Answer · 2015-01-10T20:09:41

Not familiar with jQuery so i sought an asp.net solution when i had this problem. I solved this problem by altering the a href in the Lists and replaced with asp:linkbutton. Then i also went to the divs containing the tabs and added runat = "server" to each one, also added ID="Tab1" , Tab2 and so on. Then on the code behind for the linkbuttons i added the following code

Me.Tab1.Attributes("class") = "tab-pane active"
Me.Tab2.Attributes("class") = "tab-pane"
Me.Tab3.Attributes("class") = "tab-pane"

For the tab you want to be active you change the attribute to tab-pane active. This way when the linkbutton is clicked only the tab you want to be active is active and on postback because these controls are now server side you will remain on the active tab.

asp.net bootstrap Keep current active tab after post-back event

2 Answers