Wednesday, March 21, 2012

Question re default button inside an update panel not working

I have a page containing an update panel. Inside the update panel are two user controls: one that displays messages, and one that allows message capture.
The message-capture control looks like this:


<asp:Panel ID="PanelChatSay" runat="server" DefaultButton="ButtonSay" >
<asp:TextBox ID="TextBoxChat" runat="server" Width="90%"/>
<asp:Button ID="ButtonSay" runat="server" Text="Say" OnClick="ButtonSay_Click" />
</asp:Panel
I want the enter key to submit as if the "Say" button had been pressed. Yet when focus is in the textbox and I hit enter, nothing happens. All that seems to happen is that the text box loses focus.

Any ideas on how to fix this?

Hi,

I tried your code, the page was successfully submitted when I hit enter.

If it doesn't work for you, you may use the following script to force it.

<asp:TextBox ID="TextBox1" runat="server" Width="90%"onkeypress="if(event.keyCode == 13)document.getElementById('Button1').click();"/>

Hope this helps.


Hi AnthonySteetle,

I have read your question carefully and got a little confused. In your thread, I think you have two questions:

AnthonySteele:


I want the enter key to submit as if the "Say" button had been pressed.

My Sample:

<%@. Page 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"> protected void ButtonSay_Click(object sender, EventArgs e) { this.Label1.Text = DateTime.Now.ToString(); } protected void TextBoxChat_TextChanged(object sender, EventArgs e) { this.Label1.Text = DateTime.Now.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Panel ID="PanelChatSay" runat="server" DefaultButton="ButtonSay"> <asp:TextBox ID="TextBoxChat" runat="server" Width="90%" onkeyup="updateDate()" AutoPostBack="false" OnTextChanged="TextBoxChat_TextChanged"/> <asp:Button ID="ButtonSay" runat="server" Text="Say" OnClick="ButtonSay_Click"/> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <script type="text/javascript" language="javascript"> function updateDate(){ __doPostBack("<%=TextBoxChat.ClientID%>",''); } </script> </form></body></html>

AnthonySteele:


Yet when focus is in the textbox and I hit enter, nothing happens

Please confirm if your submit button is focused when the textbox is clicked. My sample seems it works fine.

Hope this helps. If I misunderstood you, please let me know.


Thank, Raymond. That does the general trick. I have it working as follows:

* remove the defaultButton declaration from the panel.
* Add the following to the page load:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string enterScript = "if(event.keyCode == 13) document.getElementById('" + ButtonSay.ClientID + "').click();";
TextBoxChat.Attributes.Add("onclick", enterScript);
}
}

Now all I need to do is put input focus back in the text box after postback.

No comments:

Post a Comment