I have an old web pages project and I'm applying to it bootstrap 3 theme but when trying to do some tabs on page_load the tabs not working correctly I can't move between tabs but when I do some Postback using a button the tabs work correctly and I can move between them and view there content


ASPX:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterPage.master" AutoEventWireup="true" CodeBehind="ProvidersTrainersManagement.aspx.cs" Inherits="TNA.Admin.ProvidersTrainersManagement"%>

<asp:Content ID="Content1" ContentPlaceHolderID="AdminHeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="AdminMainContent" runat="server">
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <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" runat="server">Personal

                        </a></li>

                        <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab" runat="server">Employment</a></li>

                        <li><a href="#TEST" aria-controls="TEST" role="tab" data-toggle="tab">TEST</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 role="tabpanel" class="tab-pane" id="TEST">
                            test

                        </div>

                    </div>

                </div>


                <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />

                <asp:HiddenField ID="TabName" runat="server" />

            </div>
            <div>
            </div>


        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="AdminScriptContent" runat="server">
    <script type="text/javascript">


 function pageLoad() {

            $(document).ready(function () {

                var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
                console.log(tabName);
                $('#Tabs a[href="#' + tabName + '"]').tab('show');

                $("#Tabs a").click(function () {
                    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
                });
            })
        }
    </script>
</asp:Content>

CS:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TNA.Admin
{
    public partial class ProvidersTrainersManagement : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (this.IsPostBack)
            {
                TabName.Value = Request.Form[TabName.UniqueID];
            }
        }
    }
}

Related posts

Recent Viewed