|
|
Rank: Advanced Member
Groups: Member
Joined: 9/4/2007
Posts: 114
|
I have a dialog with a few labels, one textbox, a range validator and one button control. The users like to use the enter key instead of clicking the button with the mouse. When I add a Panel with the DefaultButton property set to the Button control and press enter, the button OnClick handler never fires. the dialog simply closes with no further action. Clicking the button fires the event as expected, enter key does not.
How do I get the Enter key to fire the OnClick event for the button?
Thanks,
Duane
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi,
The dialog intercepts the enter key and interprets it as closing dialog. You can use JavaScript handle the dialog's ClientSideOnAccept to perform additional action when the dialog closes. For example, if you wish it to trigger the button's Click event, you can call __doPostBack with the appropriate parameters. It should usually be something like:
__doPostBack("your_control_client_id", "your_event_argument");
To find out the exact form, you can use your browser's view page source feature to see what ASP.NET generates for the control's onclick event handler and then copy whatever there to your client side JavaScript event handler.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/4/2007
Posts: 114
|
Ok, I am able to trap the enter key now, and the form validation is working, but the button OnCommand handler is not being called, unless I actually click the button.
I substituted __doPostBackWithOptions() for __doPostBack(), since __doPostBack did nothing.
Below is my javascript function,
This is the same syntax as the onclick() function for the "<input type=submit". that .NET generates for the Button.
function handleAcceptButton() {
alert('handle accept');
__doPostBackWithOptions(new WebForm_PostBackOptions("<%= btn_Continue.ClientID %>", "", true, "", "", false, false));
}
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/4/2007
Posts: 114
|
I take that back, the validator was not being handled. I corrected the script call to use
WebForm_doPostBackWithOptions() , but it is still not calling the postback handler for the button.
What am I missing?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi, Please try the following code:
Code: JavaScript
function clientAcceptHandler()
{
WebForm_DoPostBackWithOptions(
new WebForm_PostBackOptions(
"Dialog1$ctl00$Button1", //You will need to change this
"", true, "", "", false,
true)); //This last argument is true
//You may need to return false so that the
//dialog will not close in case validation fails
return false;
}
The key is you need to change the last argument for new WebForm_PostBackOptions from false to true. Hope this helps. Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/4/2007
Posts: 114
|
This still does not properly process the click handler for the button.
It still ONLY processes the page and handles the button OnClick handler properly IF you actually physically click the button.
Pressing enter calls the page twice (!IsPostBack = true), before handling the click event.
Alert() messages inserted in the clientAcceptHandler are called twice before any code-behind is executed.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi, The code only shows you how to properly raises the button click event from JavaScript. It is in no way to guarantee everything will work the same way as without dialog. We can't make it work that way because having enter key to close the dialog is what a lot of our users wanted (one thing we can certainly look into is to add an option to turn this on or off). So you will need to correctly integrate this with the rest of your page logic so that it fits your unique situation, and we will not be able to debug your code for any problems occured on this stage. We have verified the following code correctly raises the button click only once both on enter and on mouse click. So you may want to compare this with yours and see if it helps.
Code: HTML/ASPX
<body>
<form id="form1" runat="server">
<script>
function test()
{
WebForm_DoPostBackWithOptions(
new WebForm_PostBackOptions(
"Dialog1$ctl00$Button1", //You will need to change this
"", true, "", "", false,
true)); //This last argument is true
//You may need to return false so that the
//dialog will not close in case validation fails
return false;
}
</script>
<div>
<eo:Dialog runat="server" ID="Dialog1" BackColor="#47729F" ControlSkinID="None" HeaderHtml="Dialog Title" Height="100px" Width="168px" ClientSideOnAccept="test" InitialState="Visible">
<HeaderStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #ffbf00 3px solid; padding-left: 4px; font-weight: bold; font-size: 11px; padding-bottom: 2px; color: white; padding-top: 2px; border-bottom: #22456a 1px solid; font-family: verdana" />
<ContentStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana" />
<FooterStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana" />
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</eo:Dialog>
</div>
</form>
</body>
</html>
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/4/2007
Posts: 114
|
Unfortunately, button OnClick handler for the button is not executed when the user presses the enter key if focus is on [one of] the textboxes.
The action we are trying to achieve is the "submit" button behavior where the handler for the OnClick event is executed just as if the button where physically clicked.
Apparently that isn't going to happen...
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Duane wrote:Unfortunately, button OnClick handler for the button is not executed when the user presses the enter key if focus is on [one of] the textboxes. Our sample does call server side OnClick handler. We have provided you a working sample and explained all the elements involved. If the sample code as is behaves differently on your machine than described please let us know. Otherwise you will need to work out the rest and we are closing this issue.
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/4/2007
Posts: 114
|
Ok... thanks for your help.
|
|