javascript - Focus Method not working in textbox using nav-tabs (C#, ASP.NET, Boostrap3)

Question

I am trying to focus a textbox after an OnTextChanged Method from another textbox. These text boxes are on second nav-tab, and when OnLoad Page comes (after ontextchanged from txtNoPizza), txtSeriePizza should focus itself, but it does not. In the first nav-tab, I have a similar process and it does work there.

<div ID="Pizza" class="tab-pane fade">
            <br />
            <asp:TextBox ID="txtNoPizza" runat="server" Height="16px" Placeholder="Please Scan your ID" style="margin-top: 0px" OnTextChanged="txtNoPizza_TextChanged" AutoPostBack="true"></asp:TextBox>
            <asp:Label runat="server" ID="lblNamePizza" Visible="false"></asp:Label>
            <asp:Panel ID="pnlPizza" runat="server" Visible="false">
                <div class="row text-center">
                    <div class="col-lg-12">
                        <h3>Receive Series</h3>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-lg-12">
                        <asp:Panel Id="pnl2" runat="server" DefaultButton="btnSubmitPz">
                            <asp:TextBox ID="txtSeriePizza" runat="server" Height="16px" Placeholder="SN" style="margin-top: 0px" ClientIDMode="Static"/>
                            <asp:Button Id="btnSubmitPz" Text="Submit" onClick="btnSubmitPz_Click" style="display: none" runat="server" />
                        </asp:Panel>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-lg-12">
                        <h2>Left to scan: <asp:Label runat="server" ID="lblLeft"></asp:Label> </h2>
                    </div>
                </div>
            </asp:Panel>
        </div>

I used Hiddenfields and a Javascript function to load the selected nav tab every on load event (if I don't do that then the content from navtab 1 is displayed by default).

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

I already have tried with focusing the textbox directly from a javascript function but did not work. This is the event that fires the focus method:

 protected void txtNoPizza_TextChanged(object sender, EventArgs e)
        {
            try
            {
                DataSet ds;
                ds = DB.SP_VALIDATE_EMP_CREDENTIALS(txtNoPizza.Text);

                string access = ds.Tables[0].Rows[0][0].ToString();
                string message = ds.Tables[0].Rows[0][1].ToString();


                if (access.Contains("2") || access.Contains("3"))
                {
                    pnlPizza.Visible = true;
                    lblNamePizza.Visible = true;
                    lblNamePizza.Text = message;
                    txtNoPizza.ReadOnly = true;
                    txtSeriePizza.Focus();
                    ((SiteMaster)Page.Master).ShowMessage("Access granted.", SiteMaster.MessageType.Success);
                    hidTAB.Value = "#Pizza";
                    Focus();
                }
}

question from:https://stackoverflow.com/questions/65926969/focus-method-not-working-in-textbox-using-nav-tabs-c-asp-net-boostrap3

Answer 1

Waitting for answers