Alina Anjum Alina Anjum - 6 months ago 369
jQuery Question

Make current tab active after postback bootstrap tabs

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

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

  1. Bottstrap CSS first
  2. jQuery
  3. 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>