Rank: Advanced Member
Groups: Member
Joined: 4/13/2009
Posts: 37
|
I'm having some problems with dialog boxes and the enter key. I'd like to display a simple dialog box with a textfield and a button. When a user is finished entering text, I'd like them to be able to press the enter key (as opposed to clicking on it with a mouse) and postback. This works, however, when I try to place two dialogs on a page, the enter key event always gets fired for the first dialog and never the second. Here's a complete example:
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dialog2.aspx.cs" Inherits="JungleDiskUI2.Dialog2" %>
<%@ Register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Dialog ID="dlgDialog1" runat="server" AcceptButton="Button1"
AcceptButtonPostBack="True" BackColor="White" CloseButtonUrl="00020312"
ControlSkinID="None" HeaderHtml="First" Height="216px" Width="320px">
<HeaderStyleActive CssText="background-image:url('00020311');color:black;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:5px;padding-left:8px;padding-right:3px;padding-top:0px;" />
<BorderImages BottomBorder="00020305" BottomLeftCorner="00020304"
BottomRightCorner="00020306" LeftBorder="00020303" RightBorder="00020307"
TopBorder="00020310" TopLeftCorner="00020301" TopLeftCornerBottom="00020302"
TopRightCorner="00020309" TopRightCornerBottom="00020308" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="First" />
<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
</ContentTemplate>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
</eo:Dialog>
<eo:Dialog ID="dlgDialog2" runat="server" AcceptButton="Button4"
AcceptButtonPostBack="True" BackColor="White" CloseButtonUrl="00020312"
ControlSkinID="None" HeaderHtml="Second" Height="216px" Width="320px">
<HeaderStyleActive CssText="background-image:url('00020311');color:black;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:5px;padding-left:8px;padding-right:3px;padding-top:0px;" />
<BorderImages BottomBorder="00020305" BottomLeftCorner="00020304"
BottomRightCorner="00020306" LeftBorder="00020303" RightBorder="00020307"
TopBorder="00020310" TopLeftCorner="00020301" TopLeftCornerBottom="00020302"
TopRightCorner="00020309" TopRightCornerBottom="00020308" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<asp:Button ID="Button4" runat="server" onclick="Button4_Click" Text="Second" />
<asp:TextBox ID="txtSecond" runat="server"
ontextchanged="txtSecond_TextChanged"></asp:TextBox>
</ContentTemplate>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
</eo:Dialog>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="First" />
<asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="Second" />
<br />
</div>
</form>
</body>
</html>
Here's the code behind:
Code: C#
public partial class Dialog2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.dlgDialog1.InitialState = EO.Web.DialogState.Hidden;
this.dlgDialog2.InitialState = EO.Web.DialogState.Hidden;
}
}
protected void Button2_Click(object sender, EventArgs e)
{
this.dlgDialog1.InitialState = EO.Web.DialogState.Visible;
}
protected void Button3_Click(object sender, EventArgs e)
{
this.dlgDialog2.InitialState = EO.Web.DialogState.Visible;
}
//
protected void Button1_Click(object sender, EventArgs e) // First Dialog form.
{
// Gets fired when I click the second button, enter text in the
// text box on the second dialog form, and press the enter key.
int a = 0;
}
protected void Button4_Click(object sender, EventArgs e) // Second Dialog form.
{
// This won't get reached if we launch the second dialog box,
// enter text and press the enter key.
int a = 0;
}
protected void txtSecond_TextChanged(object sender, EventArgs e)
{
this.dlgDialog2.AcceptButton = "Button4"; // A lame attempt,
}
}
Steps to reproduce: Click on the button labeled "Second" to display the second Dialog form. Enter some brief text in the textfield. Press the enter key Result: The Button1_Click() function gets called when the Button4_Click() function should be called. Do you have any suggestions? Thanks, Marty
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Thanks for the code. The dialog actually does not dictate which button is fired when enter key is pressed. It merely intercepts it and closes the dialog if you have set AcceptButton. The logic implemented by the dialog is as follow:
1. If AcceptButton is set and AcceptButtonPostBack is also set to true, then it does nothing more than closing the dialog;
2. If AcceptButtonPostBack is not set to true, then it not only closing the dialog, but also cancel the enter key event
In the first case, the page continues to post back and fires whatever event the browser decides to fire. In the second case, the post back is canceled so no server event is fired.
The first case is identical to a regular page with a simple textbox and multiple buttons. In this case if you enter something in the textbox and then press enter, there is no fixed rules on which button should be considered clicked. In fact different browsers do interpret it differently. So for the same page you may get Button1's Click event to be fired on one browser, and get Button2's Click event to be fired on another browser.
There are a number of workaround for this issue, all of which requires a small amount of additional code. For example, you can set a flag in your view state to "remember" which button was clicked to show the dialog. You would then check this flag in your code to decide whether currently dialog1 or dialog2 is visible, based on that information you can then decide whether the enter key should be considered Button1 or Button4. Another way is to use JavaScript to set the value of a hidden input element. You can put a hidden input element in your page, then set each dialog's ClientSideOnAccept a different function so that when the dialog is closed, the respective function will be called and it would set the hidden input element to a unique value. You would then check the value of this hidden input element in the server side to identify which button was clicked.
Thanks!
|
Rank: Advanced Member
Groups: Member
Joined: 4/13/2009
Posts: 37
|
Ok, got it. I implemented the ViewState work around and it works fine.
Thanks,
Marty
|