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

Last Reply 10 months ago By pandeyism

Posted 10 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

You are viewing reply posted by: pandeyism 10 months ago.
Posted 10 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