Remain bootstrap tab after postback c#

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" rel="nofollow noreferrer noopener"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active"); 
                    $(this).addClass('active');
                    $(this).tab('show');
                })

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

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

                $('#myTab a[href="#account" rel="nofollow noreferrer noopener"]').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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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 + '" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"]' ).tab( 'show' );
   });

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

Method 2

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 + '" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"]').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" rel="nofollow noreferrer noopener" data-toggle="tab">Home page</a></li>
  <li><a href="#tab2" rel="nofollow noreferrer noopener" 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.

Method 3

Please try this

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="nofollow noreferrer noopener" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://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" rel="nofollow noreferrer noopener" aria-controls="personal" role="tab" data-toggle="tab">Personal
    </a></li>
    <li><a href="#employment" rel="nofollow noreferrer noopener" 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 + '" rel="nofollow noreferrer noopener"]').tab('show');
$("#Tabs a").click(function () {
    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>

Method 4

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/";
});
});

Method 5

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 + '" rel="nofollow noreferrer noopener"]').tab('show');
        $("#myTab a").click(function () {
            selectedTab.val($(this).attr("href").substring(1));
        });
    });

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0