Set focus on TextBox inside Bootstrap Modal Popup inside ASP.Net UpdatePanel using jQuery

Last Reply 5 months ago By pandeyism

Posted 5 months ago

Refrence to your below link

Open (Show) Bootstrap Modal Popup Window using jQuery

i want to open this dialog inside update panel and add textbox in dialog. 

when dialog will be open autofocus on textbox 

Thanks

Posted 5 months ago

Hi arehman,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        function ShowPopup() {
            $('#myModal').modal('show');
            $('#myModal').on('shown.bs.modal', function () {
                $('#txtUserName').focus();
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div>
                <br />
                <asp:Button Text="Show Popup" runat="server" ID="btnShowPopup" class="btn btn-info btn-lg"
                    OnClientClick="ShowPopup()" OnClick="btnShowPopup_Click" />
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">
                                    Modal title</h4>
                            </div>
                            <div class="modal-body">
                                <input type="textusername" id="txtUserName" class="form-control" style="width: 300px"
                                    name="name" value="" />
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    Close</button>
                                <button type="button" class="btn btn-primary">
                                    Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Code

C#

protected void btnShowPopup_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup();", true);
}

 VB.Net

Protected Sub btnShowPopup_Click(sender As Object, e As System.EventArgs)
    ScriptManager.RegisterStartupScript(CType(sender, Control), Me.GetType(), "Popup", "ShowPopup();", True)
End Sub

Screenshot