Set focus to textbox after postback RSS

• • Reply
  

  grantm

  Member

  33 Points

  32 Posts

  Set focus to textbox after postback

  Apr 13, 2007 08:28 AM|LINK

  Hi

  I have a textbox and a button in an update panel.
  Once the user submits this, the textbox is cleared.
  How can i set focus on the textbox after the post back?

  Here is how my code is currently set:

  .aspx

  <asp:UpdatePanel id="UpdatePanel2" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
              <asp:TextBox id="tbNewChat" runat="server" Width="150px" CssClass="textbox"></asp:TextBox>
              <asp:Button ID="btnSubmit" runat="server" Text="Submit" CausesValidation="false" OnClick="btnSubmit_Click" CssClass="button" />
      </ContentTemplate>
  </asp:UpdatePanel>

   .aspx.cs

  protected void btnSubmit_Click(object sender, EventArgs e)
  {
  	tbNewChat.Text = "";
  
  	System.Text.StringBuilder sb = new System.Text.StringBuilder();
  	sb.Append("<script Language=\"javascript\" type=\"text/javascript\">;");
  	sb.Append("document.getElementById('" + UpdatePanel2.FindControl("tbNewChat").UniqueID.Replace("$", "_") + "').focus();");
  	sb.Append("</script>");
  
  	Page.ClientScript.RegisterStartupScript(this.GetType(), "focuschatbox", sb.ToString());
  }

  This however does not set focus to the textbox after btnSubmit it clicked.
  how can i achieve this?

  TIA

• • Reply
  

  smunk

  Member

  2 Points

  1 Post

  Re: Set focus to textbox after postback

  Apr 13, 2007 11:59 AM|LINK

  UpdatePanel2.FindControl("tbNewChat").UniqueID.Replace("$", "_")

  You should be using

  UpdatePanel2.FindControl("tbNewChat").ClientID

  Try adding setTimeout(  "document.getElementById(....);", 100 )
  to your javascript

• • Reply
  

  grantm

  Member

  33 Points

  32 Posts

  Re: Set focus to textbox after postback

  Apr 13, 2007 02:10 PM|LINK

  smunk

  UpdatePanel2.FindControl("tbNewChat").UniqueID.Replace("$", "_")

  You should be using

  UpdatePanel2.FindControl("tbNewChat").ClientID

  THANK YOU!! I have wondered about that for quite some time! [:)] 

  smunk

  Try adding setTimeout(  "document.getElementById(....);", 100 )
  to your javascript

  This is still not setting the textbox focus.
  I have tried both setTimeout & window.serInterval

      protected void btnSubmit_Click(object sender, EventArgs e)
      {
                  tbNewChat.Text = "";
  
                  System.Text.StringBuilder sb = new System.Text.StringBuilder();
                  sb.Append("<script Language=\"javascript\" type=\"text/javascript\">\r\n");
                  sb.Append("window.setInterval(document.getElementById('" + UpdatePanel2.FindControl("tbNewChat").ClientID + "').focus(), 100);\r\n");
                  //sb.Append("setTimeout(document.getElementById('" + UpdatePanel2.FindControl("tbNewChat").ClientID + "').focus(), 100);\r\n");
                  sb.Append("</script>");
  
                  Page.ClientScript.RegisterStartupScript(this.GetType(), "focuschatbox", sb.ToString());
      }

   
• • Reply
  

  busyweb

  Member

  706 Points

  121 Posts

  Re: Set focus to textbox after postback

  Apr 13, 2007 04:42 PM|LINK

  Hello,

  It's from Ajax documentation. It works very well. Put this javascript on your updatepanel page. You may have to change controls id strings.

  <script type="text/javascript">
    var postbackElement;
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
    
  
    function beginRequest(sender, args) {
        postbackElement = args.get_postBackElement();
    }
           
  
    function pageLoaded(sender, args) {
        var updatedPanels = args.get_panelsUpdated();
        if (typeof(postbackElement) === "undefined") {
            return;
        }
        else if (postbackElement.id.toLowerCase().indexOf('button1') > -1) {
            for (i=0; i < updatedPanels.length; i++) {
                alert('here');
                document.getElementById('<%= TextBox1.ClientID %>').focus();
            }
        }
    
  
    }
  </script>

   
  • Marked as answer by grantm on Apr 13, 2007 06:35 PM
• • Reply
  

  grantm

  Member

  33 Points

  32 Posts

  Re: Set focus to textbox after postback

  Apr 13, 2007 06:36 PM|LINK

  thanks!

  That was exactly what i needed