Setting focus on webform

groston · Dec 5, 2003

I suspect that I am making this much harder than necessary...

Consider a form with four TextBox'es: txtFName, txtMName, txtLName and txtUserName. The first three have Autopostback=true. The UserName is created algorithmically from the user's name.

The problem is this: when I enter a name in one of the first three text boxes, and then hit tab (which causes a reload due to the autopostback), the focus stays in the box and does not advance.

Here is the code I have put together - but its does not work as desired. What am I doing wrong? (I have stepped through this and everything seems OK - it just doesn't set the focus where I want upon reloading the page.)

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
If (IsPostBack) Then
If (Request.Params("__EVENTTARGET&quot

.ToString = "txtFName&quot

Then
showUserName()
SetFocus(txtMName)
ElseIf (Request.Params("__EVENTTARGET&quot

.ToString = "txtMName&quot

Then
showUserName()
SetFocus(txtLName)
ElseIf (Request.Params("__EVENTTARGET&quot

.ToString = "txtLName&quot

Then
showUserName()
SetFocus(txtEmail)
End If
Else
' do first time stuff
End If
End Sub

Private Sub showUserName()
' do dtuff to determine the username
txtUserName.Text = LCase(strUserName)
End Sub

Private Sub SetFocus(ByVal ctrl As Control)
' Define the JavaScript function for the specified control.
Dim focusScript As String = "<script language='javascript'>document.getElementById('" + ctrl.ClientID + "').focus();</script>"

' Add the JavaScript code to the page.
Page.RegisterStartupScript("FocusScript", focusScript)
End Sub

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 5, 2003

Not sure if it'll help, but have you tried enabeling SmartNavigation? One of it's purposes is "persisting element focus between navigations". All you need is to include SmartNavigation="true" in the Page tag:

Code:

<%@ Page language=&quot;c#&quot; SmartNavigation=&quot;true&quot; %>

Also make sure that you have /aspnet_client/system_web/1_1_4322(Framework 1.1) directory on the root of your web site. This directory should have SmartNav.htm, SmartNav.js and WebUIValidation.js files in it.

groston · Dec 6, 2003

LV

Thanks for the suggestion. I tried it, but no luck. What I see happening is this: I hit tab, the focus moves to the next box, the pages refreshes and voila/presto, the focus is back in the first box.

This is damned annoying...

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 6, 2003

OK, I see. You have the AutoPostBack property in each text box set to true. Are you using the TextChanged event as well? This event wil be fired on a text box once text in it is changed an the user tabbed out of it(if of course the AutoPostBack=true):

Code:

private void txtFName_TextChanged(object sender, System.EventArgs e)
{
  SetFocus(txtMName);
}
private void txtFMame_TextChanged(object sender, System.EventArgs e)
{
  SetFocus(txtMLame);
}

This way you probably won't have to have any code in Page_Load.

groston · Dec 6, 2003

LV,

Thanks again for your help, but still, no success.

I have changed by bad code to your latest suggestion - much better, thanks!

As a test, I replaced the line

Dim focusScript As String = "<script language='javascript'>document.getElementById('" + ctrl.ClientID + "').focus();</script>"

with

Dim focusScript As String = "<script language='javascript'>alert('This is an alert');</script>"

and the alert window appeared, thus, I believe that the Page.RegisterStartupScript method is functioning properly.

I have tried both with and with SmartNavigation.

I am at a loss :-(

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 6, 2003

OK, let's try one more thing. We can attach a javascript to a textbox event and see if it'll help.

Code:

on the page:
<head>
 <script language=javascript>
  function setFocus(textId){
   document.getElementById(textId).focus();
  }
 </script>
</head>
in the code behind:
private void Page_Load(object sender, System.EventArgs e)
{
  if(txtFName.Attributes[&quot;onblur&quot;] == null)
  {
    txtFName.Attributes.Add(&quot;onblur&quot;, &quot;javascript:setFocus('&quot; + txtMName.ClientID + &quot;')&quot;);
  }

   if(txtMName.Attributes[&quot;onblur&quot;] == null)
  {
    txtMName.Attributes.Add(&quot;onblur&quot;, &quot;javascript:setFocus('&quot; + txtLName.ClientID + &quot;')&quot;);
  }
}

Try adding this code and comment out all existing code for now.

groston · Dec 6, 2003

LV,

Since I gave up thinking as a bad habit years ago, I am using VB, not C#. So, I converted your code to this:

If (IsNothing(txtFName.Attributes("onblur&quot

)) Then
txtFName.Attributes.Add("onblur", "javascript:setFocus('" + txtMName.ClientID + "')&quot

End If

I verified that the method was executed, and you can guess the rest - the focus stayed in txtFName.

Must be something stupid that I am doing. Time to create a new web applicaiton and start with a minimal configuration and see when things break. I'll get back to you.

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 6, 2003

Did you comment out the event handler registrations for the TextChanged events in the InitializeComponent? Also make the AutoPostBack=False on them as well. I understand that you need it, but just for sake of testing the javascript onblur stuff. And I think your C#/VB conversion is perfectly right.

groston · Dec 7, 2003

LV,

Below is the simplest web page i could design. If you turn off autopostback, tabbing moves between the textboxes properly. Turn on autopostback, and it doesn't work.

Let's try to solve the problem with this example. I can then take the lessons learned to my real app.

+++ webform1.aspx +++
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta name="vs_snapToGrid" content="True">
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="

http://schemas.microsoft.com/intellisense/ie5">

</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" style="Z-INDEX: 100; LEFT: 32px; POSITION: absolute; TOP: 24px" runat="server"
Width="100px" Height="24px">Textbox 1 -></asp:Label>
<asp:TextBox id="TextBox2" style="Z-INDEX: 104; LEFT: 144px; POSITION: absolute; TOP: 72px" tabIndex="2"
runat="server" Width="100px" Height="24px" AutoPostBack="True"></asp:TextBox>
<asp:Label id="Label2" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 72px" runat="server"
Width="100px" Height="24px">Textbox 2 -></asp:Label> 
<asp:TextBox id="TextBox1" style="Z-INDEX: 103; LEFT: 144px; POSITION: absolute; TOP: 24px" tabIndex="1"
runat="server" Width="100px" Height="24px" AutoPostBack="True"></asp:TextBox>
</form>
</body>
</HTML>

+++ webform1.aspx.vb +++

Public Class WebForm1
Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents Label2 As System.Web.UI.WebControls.Label
Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
Protected WithEvents TextBox2 As System.Web.UI.WebControls.TextBox

'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub

End Class

+++ end +++

Thanks for all of your help!

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 7, 2003

groston, is there any specific reason to have AutoPostBack=True on the text boxes?

groston · Dec 7, 2003

In the actual application, I want to calculate and display a value once text is entered into certain textboxes. I figured the best way was to use autopostback.

The sample is a trivial case to try to understand why the tabbing isn't working as expected when autopostback is enabled.

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 7, 2003

Is it possible you do it via client side javascript or a server side hit is required to do the calculation? In other words, are you doing your calculation based on values entered in the form controls or you need to pass a value to a class (or procedure), get the value and display it on the form?

groston · Dec 7, 2003

Server side.

The value itself could be calculated client-side, however, it must be sent to ehr DB to check for uniqueness.

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 7, 2003

OK, I see. Let's try to change the SetFocus procedure(still C# - please convert):

Code:

private void SetFocus(Control ctrl)
 string clientId = strl.ClientID;
 string script = &quot;<script language=javascript>&quot;;
 script += &quot;function window.onload(){&quot;;
 script += &quot;document.getElementById('&quot; + clientId + &quot;').focus();}&quot;;
 script += &quot;</script>&quot;;
 if(!Page.IsClientScriptBlockRegistered(&quot;settingFocus&quot;)){
  Page.RegisterClientScriptBlock(&quot;settingFocus&quot;, script);
 }

groston · Dec 7, 2003

LV,

It's getting late here and tomorrow will be tough. I will try this out tomorrow night, Tuesday at the latest. Thanks.

----

Gerry Roston
gerry@pairofdocs.net

LV · Dec 7, 2003

OK, let me know.

groston · Dec 22, 2003

LV,

The issue was, per your first response to me dated 12/6, related to SmartNavigation. However, it turned out to be the culprit, not the savior!

I have SN turned on for the site in Web.Config. When I set SN="False" on the web page, it performs as expected.

This seems to be the second time today that SN has caused problems. Need to look into this some more...

Thanks.

Happy holidays.

----

Gerry Roston
gerry@pairofdocs.net

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Setting focus on webform

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

LV

Programmer

groston

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor