Set Focus on Textbox in modalPopup Panel : The Official Microsoft ASP.NET Forums

Reply

KJAK

Participant

1663 Points

Set Focus on Textbox in modalPopup Panel

May 17, 2007 05:22 PM|LINK

===========================================================================
IDE: Visual Studio Pro 2005
Technologies: SQLServerExpress, VB.Net
============================================================================

I am curious....

How do you set focus on a textbox control in a modalPopup Panel once the TargetControl is activated?

I have tried putting it in the code behind for the TargetControl and it does not work.

Respect to the community...

KJAK

Reply

Zhou

Participant

1428 Points

266 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 18, 2007 10:16 AM|LINK

Hi,

you can add an event handler to the ModalPopup showing event and set the focus with a javascript function. Add this script to your page:

    function SetFocusOnControl()
    {
        // set the focus with javascript, e.g.: window.getElementById("xyz").focus();
    }
    function modalSetup()
    {
        var modalPopup = $find('ModalDialogTest');             // <. this is the BehaviorID from the ModalPopupExtender
        modalPopup.add_showing(SetFocusOnControl);
    }

</script>

Regards

Marc André

Reply

KJAK

Participant

1663 Points

473 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 18, 2007 01:14 PM|LINK

I am having difficulty trying to get this to work.

I am using Master Pages. How do I register the javaScript on a content page?

EDIT:

I just tried using this code in the code-behind for the Page... This code FAILED and did not work.

If Not Page.IsPostBack Then
            If (Not Me.ClientScript.IsStartupScriptRegistered("Startup")) Then
                Dim scriptString = "<script type='text/javascript'>" _
                & "Sys.Application.add_load(modalSetup);" _
                & "function SetFocusOnControl() {" _
                & "window.getElementById('txtUsername').focus(); }" _
                & "function modalSetup() {" _
                & "var modalPopup = $find('ModalDialogTest');" _
                & "modalPopup.add_showing(SetFocusOnControl); }" _
                & "</script>"


                Me.ClientScript.RegisterStartupScript(Me.GetType(), "Startup", scriptString)
            End If
        End If

Respect to the community...

KJAK

Edited by KJAK on May 18, 2007 01:24 PM

Reply

Raymond Wen ...

All-Star

32101 Points

3764 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 22, 2007 02:15 AM|LINK

Hi,

Basically, I'm agree with Zhou's idea. Just need to make a few changes. See the demo bellow:

[Master]

<%@ Master Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

[Page]

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
        <asp:Button ID="Button1" runat="server" Text="Popup via client" />
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
            This is popup control<asp:Login ID="Login1" runat="server">
            </asp:Login>
            <br />
            <input id="Button2" type="button" value="button" />
            <input id="Button4" type="button" value="button" /></asp:Panel>
           
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="Button2" PopupControlID="Panel1" runat="server" TargetControlID="Button1">
        </ajaxToolkit:ModalPopupExtender>
        
</asp:Content>

[CodeBehind]

Partial Class Default2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            If (Not Me.ClientScript.IsStartupScriptRegistered("Startup")) Then
                Dim scriptString = "<script type='text/javascript'>" _
                & "Sys.Application.add_load(modalSetup);" _
                & "function SetFocusOnControl() {" _
                & "$get('" _
                & Login1.ClientID _
                & "_UserName').focus(); }" _
                & "function modalSetup() {" _
                & "var modalPopup = $find('" _
                & ModalPopupExtender1.ClientID _
                & "');" _
                & "modalPopup.add_shown(SetFocusOnControl); }" _
                & "</script>"

                Me.ClientScript.RegisterStartupScript(Me.GetType(), "Startup", scriptString)
            End If
        End If
    End Sub
End Class

Hope this helps

Reply

KJAK

Participant

1663 Points

473 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 23, 2007 11:57 AM|LINK

Hi,

Thank you for your response. I have made the adjustments to the code, but it still does not set focus on the login textbox when I run the application and click the TargetControl of the ModalPopupExtender.

Here is my code for the page...

[code behind]

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '====================== Java Code for ModalPopup TextBox focus ======================='
        If Not Page.IsPostBack Then
            If (Not Me.ClientScript.IsStartupScriptRegistered("Startup")) Then
                Dim scriptString = "<script type='text/javascript'>" _
                & "Sys.Application.add_load(modalSetup);" _
                & "function SetFocusOnControl() {" _
                & "$get('" _
                & txtUsername.ClientID _
                & "').focus(); }" _
                & "function modalSetup() {" _
                & "var modalPopup = $find('" _
                & ModalPopupExtender1.ClientID _
                & "');" _
                & "modalPopup.add_shown(SetFocusOnControl); }" _
                & "</script>"


                Me.ClientScript.RegisterStartupScript(Me.GetType(), "Startup", scriptString)
            End If
        End If
        '=================== End Java Code for ModalPopup TextBox Focus ====================='

    End Sub

[page code]

<%@ Page Language="VB" Theme="LKE" MasterPageFile="~/LKE.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h1><span style="color:#AFCFE4;display:inline;">Welcome</span></h1>
    Welcome Text...<br />
    <br />
    In order to keep this site secure as possible, registration is not available from
    the web. Please contact [insert name] at [Enter Call Number] or e-mail
    at [Insert Contact E-mail Address] to receive login credentials. <br />
    <br />
    <div style="text-align:center;">
    <asp:Button ID="LoginButton" runat="server" 
    Text="Login" Width="300px" Height="75px" BorderColor="Black" BorderStyle="Solid" 
    Font-Bold="true" Font-Size="24px" BackColor="#AFCFE4" style="cursor:pointer;" />
    </div><br />
     <br />
    
    <asp:Panel ID="LoginPanel" runat="server" CssClass="modalPopup" style="display: none;">
       <div style="text-align:center;">
       <div class="Login_Header"> Enter your login credentials...</div>
       <table>
         <tr>
             <td style="text-align:right;">
                <asp:Label ID="valUsername" runat="server" Text="*" Visible="false" ForeColor="red" />
                <asp:Label ID="lblUsername" runat="server" Text="Username" />
             </td>
             <td style="text-align:left;">
                <asp:TextBox ID="txtUsername" runat="server" />
             </td>
          </tr>
          <tr>
             <td style="text-align:right;">
                <asp:Label ID="valPassword" runat="server" Text="*" Visible="false" ForeColor="red" />
                <asp:Label ID="lblPassword" runat="server" Text="Password" />
             </td>
             <td style="text-align:left;">
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
             </td>
          </tr>
          <tr>
             <td colspan="2">
                <asp:Button SkinID="RegBTN" ID="btnLogin" runat="server" Text="Sign In" Width="75px" />
                <asp:Button SkinID="RegBTN" ID="CancelButton" runat="server" Text="Cancel" Width="75px" />
             </td>
          </tr>
       </table>
       </div>
    </asp:Panel>
     
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
     TargetControlID="LoginButton"
      CancelControlID="CancelButton"
       DropShadow="true"
        BackgroundCssClass="modalBackground"
         PopupControlID="LoginPanel"
          BehaviorID="ModalDialogTest">
    </ajaxToolkit:ModalPopupExtender>
</asp:Content>

When debugging, the script appears to register. It just doesn't seem to be doing anything. Can you see any issues with my code?

Respect to the community...

KJAK

Reply

dapoussin

Member

54 Points

12 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 23, 2007 03:17 PM|LINK

Hi !

I was able to make it work with the following code in my Page_Load :

StringBuilder sb = new StringBuilder();
sb.Append("<script type=\"text/javascript\">\n");
sb.Append("Sys.Application.add_load(modalSetup);\n");
sb.Append("function modalSetup() {\n");
sb.Append(String.Format("var modalPopup = $find('{0}');\n", ModalPopupExtender1.BehaviorID));
sb.Append("modalPopup.add_shown(SetFocusOnControl); }\n");
sb.Append("function SetFocusOnControl() {\n");
sb.Append(String.Format("var textBox1 = $get('{0}');\n", tbMyTextbox.ClientID));
sb.Append("textBox1.focus();}\n");
sb.Append("</script>\n");
Page.ClientScript.RegisterStartupScript(Page.GetType(), "Startup", sb.ToString());

Hope this helps.

Laurent

Marked as answer by KJAK on May 23, 2007 04:09 PM

Reply

KJAK

Participant

1663 Points

473 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 23, 2007 04:05 PM|LINK

YES!

Thank you! I had to modify it slightly do to my application being written in VB.NET, but I have gotten it working now!

Here is the code that finally worked:

[codebehind]

If Not Page.IsPostBack Then
            If (Not Me.ClientScript.IsStartupScriptRegistered("Startup")) Then
                Dim sb As StringBuilder = New StringBuilder()
                sb.Append("<script type=""text/javascript\"">")
                sb.Append("Sys.Application.add_load(modalSetup);")
                sb.Append("function modalSetup() {")
                sb.Append(String.Format("var modalPopup = $find('{0}');", ModalPopupExtender1.BehaviorID))
                sb.Append("modalPopup.add_shown(SetFocusOnControl); }")
                sb.Append("function SetFocusOnControl() {")
                sb.Append(String.Format("var textBox1 = $get('{0}');", txtUsername.ClientID))
                sb.Append("textBox1.focus();}")
                sb.Append("</script>")
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "Startup", sb.ToString())
            End If
        End If

Thank you all for your assistance with this issue. Hopefully this thread will be useful to others in the future!

Sincerely,
KJAK

Respect to the community...

KJAK

Marked as answer by KJAK on May 23, 2007 04:06 PM

Reply

gknierim

Contributor

2008 Points

492 Posts

Re: Set Focus on Textbox in modalPopup Panel

May 23, 2007 05:50 PM|LINK

And the C# version of it:

protected void Page_Load(object sender, EventArgs e)
{
	if (!Page.IsPostBack)
	{
		if (!this.ClientScript.IsStartupScriptRegistered("startup"))
		{
		   StringBuilder sb = new StringBuilder();
			sb.Append("&lt;script type='text/javascript'>");
			sb.Append("Sys.Application.add_load(modalSetup);");
			sb.Append("function modalSetup() {");
			sb.Append(String.Format("var modalPopup = $find('{0}');", popupEntry.BehaviorID));
			sb.Append("modalPopup.add_shown(SetFocusOnControl); }");
			sb.Append("function SetFocusOnControl() {");
			sb.Append(String.Format("var textBox1 = $get('{0}');", txtValue.ClientID));
			sb.Append("textBox1.focus();}");
			sb.Append("&lt;/script>");
			Page.ClientScript.RegisterStartupScript(Page.GetType(), "startup", sb.ToString());
		}
	}
}

"Providing software solutions for your world!"

Please mark my response as the answer if it helped you.

Reply

Mobes

Member

91 Points

20 Posts

Re: Set Focus on Textbox in modalPopup Panel

Aug 17, 2007 10:21 PM|LINK

This works fine for me on a simple page but when I'm using a MultiView I'm having issues. When the ModelPopupExtender and related panel with the textbox is on the second view of a multivew, I get a popup error that says:

"Microsoft JScript runtime error: 'null' is null or not an object"

Here's my code:

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:MultiView ID="MultiView1" runat="server">
                        <asp:View ID="View1" runat="server">
                            <asp:Button ID="btnGotoView2" runat="server" Text="View2" OnClick="btnGotoView2_Click" />
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <asp:Panel ID="pnlReqDetailAddParts" Style="display: none" runat="server" CssClass="modalPopup">
                                <div id="dragReqDetailAddParts" class="modalPopupDragArea"> </div>
                                part_number:
                                <asp:TextBox ID="part_numberTextBox" runat="server"></asp:TextBox>
                                <br />
                                <asp:LinkButton ID="lbAddPart" runat="server" CausesValidation="True" Text="Add Part" />
                                <asp:LinkButton ID="lbCancelAddPart" runat="server" CausesValidation="False" Text="Cancel" />
                            </asp:Panel>
                            <ajaxToolkit:ModalPopupExtender ID="mpeReqDetailPartsAdd" runat="server"
                                TargetControlID="btnAddPart2"
                                PopupControlID="pnlReqDetailAddParts"
                                OkControlID="lbAddPart"
                                CancelControlID="lbCancelAddPart"/>
                            <asp:Button ID="btnAddPart2" runat="server" Text="Button" />
                        </asp:View>
                    </asp:MultiView>
                </ContentTemplate>
            </asp:UpdatePanel>

     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            If (Not Me.ClientScript.IsStartupScriptRegistered("Startup")) Then
                Dim sb As StringBuilder = New StringBuilder()
                sb.Append("<script type=""text/javascript\"">")
                sb.Append("Sys.Application.add_load(modalSetup);")
                sb.Append("function modalSetup() {")
                sb.Append(String.Format("var modalPopup = $find('{0}');", me.mpeReqDetailPartsAdd.BehaviorID))
                sb.Append("modalPopup.add_shown(SetFocusOnControl); }")
                sb.Append("function SetFocusOnControl() {")
                sb.Append(String.Format("var textBox1 = $get('{0}');", Me.part_numberTextBox.ClientID))
                sb.Append("textBox1.focus();}")
                sb.Append("</script>")
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "Startup", sb.ToString())
            End If
        End If

    End Sub

    Protected Sub btnGotoView2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        MultiView1.SetActiveView(View2)
    End Sub

I imagine that I'm getting this error because the javascript can't find the controls since on the initial page load, the textbox and ModalPopupExtender aren't on the first view. I'm mostly clueless on how to program around this with javascript and would greatly appreciate some help.

Reply

Mobes

Member

91 Points

20 Posts

Re: Set Focus on Textbox in modalPopup Panel

Aug 20, 2007 05:57 PM|LINK

I found a partial solution for my issue...put this in your page load or on button click events, etc.:

System.Web.UI.ScriptManager.GetCurrent(Me).SetFocus(Me.tbPartNumber)

It works with multviews and panels when the container that your controls are in, are intially set to be not visible. I still haven't found a way to get set focus on a textbox in a modalpopup on the second pane of a multiview or a panel that initially has it's visible property set to false.

Edited by Mobes on Aug 20, 2007 06:00 PM
Edited by Mobes on Aug 20, 2007 06:12 PM

Set Focus on Textbox in modalPopup Panel RSS

22 replies

KJAK

Set Focus on Textbox in modalPopup Panel

Zhou

Re: Set Focus on Textbox in modalPopup Panel

KJAK

Re: Set Focus on Textbox in modalPopup Panel

Raymond Wen ...

Re: Set Focus on Textbox in modalPopup Panel

KJAK

Re: Set Focus on Textbox in modalPopup Panel

dapoussin

Re: Set Focus on Textbox in modalPopup Panel

KJAK

Re: Set Focus on Textbox in modalPopup Panel

gknierim

Re: Set Focus on Textbox in modalPopup Panel

Mobes

Re: Set Focus on Textbox in modalPopup Panel

Mobes

Re: Set Focus on Textbox in modalPopup Panel

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft