Set Focus on Textbox in modalPopup Panel

===========================================================================
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.

Re: Set Focus on Textbox in modalPopup Panel

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é

Re: Set Focus on Textbox in modalPopup Panel

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

Re: Set Focus on Textbox in modalPopup Panel

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

Re: Set Focus on Textbox in modalPopup Panel

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?

Re: Set Focus on Textbox in modalPopup Panel

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

Re: Set Focus on Textbox in modalPopup Panel

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

Re: Set Focus on Textbox in modalPopup Panel

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());
		}
	}
}

Re: Set Focus on Textbox in modalPopup Panel

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.

Re: Set Focus on Textbox in modalPopup Panel

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.

Re: Set Focus on Textbox in modalPopup Panel

I just tried the code posted by KJAK (05-23-2007 11:05 AM), but it wasn't working for me.

I spent about 30 minutes trying different variations of the code, but my modalPopup object was always being returned as null, which produced a null reference on the "add_shown" call.

But, I've finally discovered the error! In the code above, KJAK escapes a double-quote character twice. That is, you used: \""

That should produce a compiler error as far as I'm concerned, but it still compiles. For some reason, that seemed to be causing the issue I was experiencing. After I removed the backslash at that point, the code worked for me. So, if anyone else has the same issue, try the modified code below.

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}');", mpe1.BehaviorID))
		sb.Append("modalPopup.add_shown(SetFocusOnControl); }")
		sb.Append("function SetFocusOnControl() {")
		sb.Append(String.Format("var textBox1 = $get('{0}');", confirmUsername.ClientID))
		sb.Append("textBox1.focus();}")
		sb.Append("</script>")
		Page.ClientScript.RegisterStartupScript(Page.GetType(), "Startup", sb.ToString())
	End If
End If

Re: Set Focus on Textbox in modalPopup Panel

Thank you! Saved my life...

Re: Set Focus on Textbox in modalPopup Panel

I knew it couldn't possibly be that complicated. The answer:

private void btnShowPopup_Click(object sender, EventArgs e)
    {
        ModalPopup.Show();
        ScriptManager.GetCurrent(this).SetFocus(this.textbox1);
    }

Just change "textbox1" to the name of your control.

Re: Set Focus on Textbox in modalPopup Panel

sands904

Did you ever figure this out...I am having the same issue. Thanks!

There are several answers marked on this thread. Which method are you having problems with?

Re: Set Focus on Textbox in modalPopup Panel

Thank you KJAK for posting this in the first place! and thank you Laurent for your great answer! I was having the same problem. It still works great!

Re: Set Focus on Textbox in modalPopup Panel

Hi there

I'm with this, but I can't do it works

this it's the testing code:

[Master]

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
[/Master]

[Content ]

<div>
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="Label1" runat="server" PopupControlID="Panel1" Enabled="True">
</cc1:ModalPopupExtender>

<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
[/Content ]

[VB ]

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click

ModalPopupExtender1.Show()
System.Web.UI.ScriptManager.GetCurrent(Me).SetFocus(Me.TextBox1)
[/vb]

where's a tricks??

I neen that focus on the textbox !!

help me please !!

greetings

Re: Set Focus on Textbox in modalPopup Panel

In VB you have to use:

System.Web.UI.ScriptManager.GetCurrent(Me.Page).SetFocus(Me.TextBox1)

Larry

Re: Set Focus on Textbox in modalPopup Panel

with this do not works

System.Web.UI.ScriptManager.GetCurrent(Me.Page).SetFocus(Me.TextBox1)

Re: Set Focus on Textbox in modalPopup Panel

Well, it's hard to tell whether it is or isn't from your hastily scawled code snippet, but your textbox has to be inside the update panel. Maybe it would help if you showed your actual code for the update panel.

Re: Set Focus on Textbox in modalPopup Panel

What is this ?

What do you mean and what do you say?