13

I am currently having problem retaining the bootstrap tab after my fileupload postback. The code is as follow

<script type="text/javascript">

                $('#myTab a[href="#image"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active"); 
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#information"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#password"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#account"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

    </script>

Can anyone enlighten me on how to retain this bootstrap after postback?

p.campbell
  • 98,673
  • 67
  • 256
  • 322
user3197980
  • 163
  • 1
  • 3
  • 8

5 Answers5

14

Well, I had this issue already and I solved it this way:

  1. Include a new HiddenField on your page and set its value to the first tab that need to be shown:

    <asp:HiddenField ID="hidTAB" runat="server" Value="image" />
    
  2. On every click function you defined to alternate the tabs, set the HiddenField value to the actual tab clicked.

    document.getElementById('<%=hidTAB.ClientID %>').value = "image";
    
  3. On your jQuery document.ready function, use the HiddenField value to alternate to the last tab opened before the Postback.

    $(document).ready( function(){
        var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
        $( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
    });
    

Here's the Bootstrap Tab Documentation and here's the jQuery Ready documentation

aledpardo
  • 761
  • 9
  • 19
  • Hi , I am sorry . I am new to jquery.. Are you able to provide me a sample so i can work on ? – user3197980 Jan 15 '14 at 12:23
  • on the 3rd step, i keep encounter error ";" expected. i check for syntax, i cant find any problem with it? how can it be solve? – user3197980 Jan 15 '14 at 13:12
  • changed the document.getElementById('<%hidTAB.ClientID%>').. to ('<%=hidTAB.ClientID%>') however. it still appear to be the same. – user3197980 Jan 15 '14 at 13:18
  • How the code related to the 3rd step is being rendered? May you put it here? – aledpardo Jan 15 '14 at 13:21
  • i changed the codes to $(document).ready(function () { var tab = document.getElementById('<%=hdnActiveTab.ClientID %>').value; $('#myTab a[href="' + tab + '"]').tab('show'); }) – user3197980 Jan 15 '14 at 14:21
  • nope. it doesn't stay in the tab when button in the selected tab was click. – user3197980 Jan 15 '14 at 17:59
  • @aledpardo try it with my example but not working can you try and check it out for me. the link is : http://stackoverflow.com/questions/22964301/asp-net-bootstrap-keep-current-active-tab-after-post-back-event?noredirect=1#comment35330632_22964301 – Djama Apr 22 '14 at 17:18
  • Problem is this causes an awful flicker as it loads the default state, then only changes it after the document loaded – Joe Oct 10 '17 at 12:34
  • Hey @Joe! Well, this is the default behavior of a ASP.NET WebForms application. On every action, it hits the server that sends the new page to be rendered. As the tab click is client-side only, we use the `HiddenField` to keep track of the tab id. – aledpardo Sep 03 '19 at 13:22
5

With reference to the above ideas here is how I did it (full code included)

In your HTML Page, in the < Head > section put

<script type="text/javascript">
    $(document).ready(function () {
        var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
        $('#myTabs a[href="' + tab + '"]').tab('show');
    });
</script>

in the < body > section put a hiddenfield

<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />

and also in the < body > section have the Bootstrap 3.0 related code

<ul class="nav nav-tabs" id="myTabs">
  <li><a href="#tab1" data-toggle="tab">Home page</a></li>
  <li><a href="#tab2" data-toggle="tab">another page</a></li>
</ul>

Do not set any tab to active (this is set by the initial Value="#tab1" of the Hiddenfield).

Then add a button to the tab2 DIV

like so:

<div class="tab-pane" id="tab2">
  <asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
  <asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>

Lastly add your c# code behind to set the value of the hiddenfield

protected void FileUploadButton_Click(object sender, EventArgs e)
{
      hidTAB.Value = "#tab2";
}

on posting back the JQuery will read the new value in the hiddenfield and show tab2 :)

Hope this helps someone.

Trev.

FlashTrev
  • 507
  • 6
  • 16
  • I have tried this code. But all tabs are visible. its adding class "active" when we click on tab2. but no change in UI even a class "active" is added to _
    _. Can you tell what is wrong.
    – Vahid Sep 24 '17 at 06:39
  • 1
    This works very well, but I found I had to set the hidden field to have a static ID. `` – Matthew Proctor Oct 23 '19 at 00:37
2

Please try this

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
    <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
    </a></li>
    <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
 </ul>
<!-- Tab panes -->
 <div class="tab-content" style="padding-top: 20px">
    <div role="tabpanel" class="tab-pane active" id="personal">
        This is Personal Information Tab
    </div>
    <div role="tabpanel" class="tab-pane" id="employment">
        This is Employment Information Tab
    </div>
 </div>
 </div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
Vishal Kiri
  • 1,248
  • 1
  • 12
  • 24
  • This worked for me. But some situations its not working. I have many linkButtons inside a repeater on second tab. When i click any linkButton It shows first tab contents and both tabs are deactivated. Can you tell me how to fix this?? – Vahid Oct 07 '17 at 03:27
0

After quite a long time trying out the bootstrap tab.. i decided to change to jquery tab. In the first place, jquery tab also give the same problem i encounter in this situation.. but after much effort in looking for solution and trying out codes after codes.

i managed to find a solution

I'm really thankful to the person who provide this solution. In this solution, it uses sessionStorage (to me, its a new stuff that i never heard of) & the codes are

$(document).ready(function () {
var currentTabIndex = "0";

$tab = $("#tabs").tabs({
     activate : function (e, ui) {
        currentTabIndex = ui.newTab.index().toString();
        sessionStorage.setItem('tab-index', currentTabIndex);
     }
});

if (sessionStorage.getItem('tab-index') != null) {
    currentTabIndex = sessionStorage.getItem('tab-index');
    console.log(currentTabIndex);
    $tab.tabs('option', 'active', currentTabIndex);
}
$('#btn-sub').on('click', function () {
    sessionStorage.setItem("tab-index", currentTabIndex);
    //window.location = "/Home/Index/";
});
});
Community
  • 1
  • 1
user3197980
  • 163
  • 1
  • 3
  • 8
0

In the above answer : the document ready function must be modified as below

  $(document).ready(function () {
        var selectedTab = $("#<%=hidTAB.ClientID%>");
        var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
        $('#myTab a[href="#' + tabId + '"]').tab('show');
        $("#myTab a").click(function () {
            selectedTab.val($(this).attr("href").substring(1));
        });
    });
obaid
  • 892
  • 11
  • 25