asp.net - Remain bootstrap tab after postback c#

Question

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?

Answer 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 + '"]' ).tab( 'show' );
   });
   

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