Fix Firefox DefaultButton issue with UpdatePanel
I was going to call this post Blah blah blah: The Maddening, but a lucky dip into forums.asp.net just before I began to write saved my bacon. I now have a fix, and the madness has been reduced to a mere simmer from its former rolling boil.
The Sample
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SaskatoonLibrary.OneSearch.WebForm1" %>
2: 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: 5: <html xmlns="http://www.w3.org/1999/xhtml" >
6: <head runat="server">
7: <title>Untitled Page</title>
8: </head>
9: <body>
10: <form id="form1" runat="server" defaultbutton="SearchButton">
11: <asp:ScriptManager ID="ScriptManager1" runat="server" />
12: 13: <asp:Panel ID="Panel1" runat="server">
14: <asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
15: <asp:Button ID="SearchButton" Runat="server"
16: Text="Search"></asp:Button>
17: </asp:Panel>
18: 19: <asp:UpdatePanel ID="UpdatePanel1" runat="Server"
20: UpdateMode="Conditional"
21: ChildrenAsTriggers="false">
22: <Triggers>
23: <asp:AsyncPostBackTrigger ControlID="SearchButton" />
24: </Triggers>
25: <ContentTemplate>
26: <asp:Repeater ID="Repeater1" runat="server"></asp:Repeater>
27: </ContentTemplate>
28: </asp:UpdatePanel>
29: 30: 31: </form>
32: </body>
33: </html>
The Issue
An ASP.NET AJAX* UpdatePanel on the page, triggered conditionally by a button. A single textbox in the form. Without some way of forcing the button to click when the ENTER key is pressed, the form merely does a postback, not a callback, thus rendering the the entire point of my UpdatePanel COMPLETELY NIL.
Note, in the sample above, that the form's DefaultButton attribute is set to SearchButton. This is the usual way to ensure that pressing ENTER fires the appropriate button click event server-side. And indeed, without an UpdatePanel in the picture, this works as advertised for both IE7 and Firefox.
But. Throw an UpdatePanel and the need to fire a callback into the mix, and Firefox pays no attention, but continues to postback when ENTER is pressed. Only IE7 performs correctly: the button's client-side click event is fired and the callback, not a postback, occurs.
The Not-fixes
These don't work. Don't waste your time. Either IE will be happy, or Firefox, but not both. (Remember? The Maddening?)
- Add a non-visible textbox to the form, which is a hack only suitable for ensuring the correct server-side event fires. Makes no difference to client-side callback initiation.
- Add a client-side onkeypress event to the textbox to check and see if the ENTER key has been pressed, and if it has, forcibly fire the relevant button's click event.
- Bang your head on the keyboard so hard people on the street stop and compliment you on the QWERTY tattoo.
The Fix
Set the button's UseSubmitBehavior attribute to false:
<asp:Button ID="SearchButton" Runat="server"
Text="Search"
UseSubmitBehavior="false"
></asp:Button>
Apparently there's a little more monkeying to do if the button is an ImageButton:
<asp:ImageButton ID="ImageButton1" runat="server"
OnClientClick="this.disabled=true;__doPostback(this.name,'');"
/>
* In the name of Cyclopean Cthulhu, couldn't we just have kept calling it by its in-development codename: "Atlas"? It feels like a mouthful of marbles every time I say "ASP.NET AJAX". And I have to write it in all caps? Fwah!