Make current tab active after postback bootstrap tabs

Question

I am using bootstrap tabs in my asp.net project, Tabs are working fine but when the user clicks on any of the button or any postback occurs,

First tab get selected.

I tried hidden field with jquery but it's not working.

What am I missing kindly elaborate please.

Here is my code :

     <script type="text/javascript">
              $(document).ready(function () {
                  var selectedTab = $("#<%=hfTab.ClientID%>");
                  var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
                 $('#dvTab a[href="#' + tabId + '"]').tab('show');
                 $("#dvTab a").click(function () {
                     selectedTab.val($(this).attr("href").substring(1));
                 });
             });
        </script>
                                        <div id="dvTab">
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal Information</a></li>
    <li><a href="#pf" aria-controls="pf" role="tab" data-toggle="tab">PF Nominee</a></li>
    <li><a href="#gf" aria-controls="gf" role="tab" data-toggle="tab">GF Nominee</a></li>
    <li><a href="#edu" aria-controls="edu" role="tab" data-toggle="tab">Education Details</a></li>
    <li><a href="#fam" aria-controls="fam" role="tab" data-toggle="tab">Family Details</a></li>
    <li><a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab">Employment History</a></li>                      
</ul>
<div class="tab-content">
    <div id="personal" role="tabpanel" class="tab-pane active">                                       
         ...                                          
    </div>
    <div id="pf" role="tabpanel" class="tab-pane">                                           
        ..
    </div>
    <div id="gf" role="tabpanel" class="tab-pane">
      ..
    </div>
    <div id="edu" role="tabpanel" class="tab-pane">
      <asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /><br />    
    </div>
</div>                                                                       
</div>                               
      <asp:HiddenField ID="hfTab" runat="server" />

The button is placed in Education Details Tab, On the click event of that button , I added :

protected void btn_AddEdu_Click(object sender, EventArgs e)
{
 hfTab.Value = "edu";
}

Answer 1

Change this line

$('#dvTab a[href="#' + tabId + '"]').tab('show');

to

$('.nav-tabs a[href="#' + tabId + '"]').tab('show');

You are selecting on basis of id dvTab which is not there.

Edit

As per your comments your jquery file is not added properly please add jquery and bootstrap in order. Also include these file at bottom of page.

<script src="Scripts/jquery-2.1.3.min.js"></script> 
<script src="Scripts/bootstrap.js"></script>

Answer 2

Add the script references in this order( at the top of the page ):

Bootstrap CSS first
jQuery
bootstrap.js

Refrences:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Complete solution:

Copy and paste this code as is and it will work:

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var selectedTab = $("#<%=hfTab.ClientID%>");
            var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
            $('#dvTab a[href="#' + tabId + '"]').tab('show');
            $("#dvTab a").click(function () {
                selectedTab.val($(this).attr("href").substring(1));
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div id="dvTab">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal Information</a></li>
                <li><a href="#pf" aria-controls="pf" role="tab" data-toggle="tab">PF Nominee</a></li>
                <li><a href="#gf" aria-controls="gf" role="tab" data-toggle="tab">GF Nominee</a></li>
                <li><a href="#edu" aria-controls="edu" role="tab" data-toggle="tab">Education Details</a></li>
                <li><a href="#fam" aria-controls="fam" role="tab" data-toggle="tab">Family Details</a></li>
                <li><a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab">Employment History</a></li>
            </ul>
            <div class="tab-content">
                <div id="personal" role="tabpanel" class="tab-pane active">
                    ...                                          
                </div>
                <div id="pf" role="tabpanel" class="tab-pane">
                    ..
                </div>
                <div id="gf" role="tabpanel" class="tab-pane">
                    ..
                    G Nom NOm
                </div>
                <div id="edu" role="tabpanel" class="tab-pane">
                    <asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /><br />
                </div>
            </div>
        </div>
         <asp:HiddenField ID="hfTab" runat="server" />   
    </form>
</body>

Make current tab active after postback bootstrap tabs

Question

2 answers

solution1
1 2016-05-26 06:24:11

solution2
1 ACCPTED 2016-05-26 07:16:06

Make current tab active after postback bootstrap tabs

Question

2 answers

solution1 1 2016-05-26 06:24:11

solution2 1 ACCPTED 2016-05-26 07:16:06

solution1
1 2016-05-26 06:24:11

solution2
1 ACCPTED 2016-05-26 07:16:06