1

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

Community
  • 1
  • 1
Djama
  • 661
  • 5
  • 11
  • 28
  • Possible dupe of http://stackoverflow.com/questions/21136981/remain-bootstrap-tab-after-postback-c-sharp – Alicia Apr 16 '14 at 14:31
  • Please update your code in a Fiddle (html, javasript) – super Apr 23 '14 at 02:48
  • 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 http://stackoverflow.com/questions/21136981/remain-bootstrap-tab-after-postback-c-sharp. – aledpardo Apr 23 '14 at 14:20
  • @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 Apr 23 '14 at 14:43
  • Try to check what value is being set on `window.location.hash` before, during & after the `shown` event, after a `Postback`. You may have a clue why it's not working. – aledpardo Apr 23 '14 at 16:01
  • [try this , this may solve your problem](http://stackoverflow.com/questions/21136981/remain-bootstrap-tab-after-postback-c-sharp) – Omid Farvid Apr 10 '16 at 09:10

2 Answers2

0

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.

Bankyiie
  • 11
  • 3
0

I tried your script and it solved one of my problems, i added this code to my submit button

Response.Redirect("Settings.aspx#step2");

Hope it works for yours

oyin
  • 26
  • 5