Ryan Ternier

Killer ASP.NET ninja coding monkeys do exist!

UpdatePanel, FireFox and the DefaultButton

Recently I was pulling my hair out with this issue. Recently I blogged about using a Modal Login control instead of redirecting to a login page. I have had great success with this.

 However, the one thing that was vexing me was the Default Button. It worked like a charm in IE. In Firefox, it behaved like the ugly step sisters. The problem wasn't that it didn't do a postback. That it did. What it didn't do was hit the server side event (the button click event).

To reproduce this issue, try the following bit of markup (This is sample markup from my Modal Login):
 *This markup is inside an UpdatePanel on the parent page.

<asp:Panel ID="pnlLogin" runat="server" DefaultButton="btnLogin" CssClass="login" Style="display: none;">

    <div id="loginDrag" class="drag">

        <h3>Login</h3>

    </div>

    <div class="tcenter error">

        <asp:Label ID="lblMessage" runat="server" />

    </div>

    <table>

        <tr>

            <td class="column1">

                Agency ID:</td>

            <td class="column2">

                <asp:TextBox ID="txtAgencyID" runat="server" SkinID="DataEntryTextBox" ValidationGroup="Login" />

                <asp:RequiredFieldValidator ID="rfvAgencyID" runat="server" ControlToValidate="txtAgencyID" Text="*" ErrorMessage="AgencyID is Required." ValidationGroup="Login" />

                <ajaxToolkit:ValidatorCalloutExtender ID="vAgencyID" runat="server" TargetControlID="rfvAgencyID" HighlightCssClass="validatorCalloutHighlight" />

            </td>

        </tr>

        <tr>

            <td>

                Username:</td>

            <td>

                <asp:TextBox ID="txtUserName" runat="server" SkinID="DataEntryTextBox" />

                <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserName" Text="*" ErrorMessage="A Username is Required." ValidationGroup="Login" />

                <ajaxToolkit:ValidatorCalloutExtender ID="vUserName" runat="server" TargetControlID="rfvUserName" HighlightCssClass="validatorCalloutHighlight" />

            </td>

        </tr>

        <tr>

            <td>

                Password:</td>

            <td>

                <asp:TextBox ID="txtPassword" runat="server" SkinID="DataEntryTextBox" TextMode="password" />

                <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" Text="*" ErrorMessage="A Password is Required." ValidationGroup="Login" />

                <ajaxToolkit:ValidatorCalloutExtender ID="vPassword" runat="server" TargetControlID="rfvPassword" HighlightCssClass="validatorCalloutHighlight" />

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" ValidationGroup="Login" UseSubmitBehavior="false" />

            </td>

        </tr>

    </table>

</asp:Panel>

 

When you are selected in any textbox and you press enter, IE will submit this and hit the button click even. however with FireFox, it will only submit - not call the onclick event.

To solve this add:   UseSubmitBehavior="False" to your submit button.

Now you can press enter whenever you want in your form and it will do the propper submit regardless of IE or FireFox. 

Comments

Gavin said:

Cheers for sharing your solution, but do you know a way of resolving the issue when using a LinkButton? Cheers.

# October 22, 2007 6:49 PM

Ryan Ternier said:

Unfortunately I'm working on that one right now.

Once I find a solution to that I'll post it.

# October 22, 2007 7:16 PM

RJ said:

Hello !

Why are we talking about "UpdatePanel" Doesn't we talk about "Panel" ?

Anyhow. I got this issue when using Firefox. My "UpdatePanel" tag isn't considered so that the click event fires a Postback instead of an AJAX action (asynchron). It does this only on Firefox, however the AJAX functionality works fine on IE

Thanks!

# February 21, 2008 8:52 AM

Peter Smith said:

Adding  UseSubmitBehavior="False" worked at treat for me....thanks

# May 28, 2008 5:58 AM

vishwanath said:

Hey,

Can u tell me, how should i resolve this problem, when i use imagebutton in asp.net.

# June 6, 2008 5:20 AM

Manolo said:

Thanks man. I was also pulling out my hair!

# October 26, 2008 5:36 PM

DigitalMan said:

For a asp.net Panel and the FireFox LinkButton issue I just create a asp button control and put it next to the LinkButton control and set it's style to "display:none;". I then set the DefaultButton for the panel to this hidden button and wire it up in code behind to do the same as the LinkButton.

# November 21, 2008 3:06 PM

Darren said:

You made my day today.  Thanks!

# December 17, 2008 3:56 PM

Pyie Sone Thein said:

I m in trouble with Browser.I write program with asp.net and using Ajax technology.But I was found error.I 'm using update panel  inside that update panel I put Detail View inside detail View I put  and used RequiredFieldValidator r. When I Enter Button,RequiredFieldValidator does not work.IF I take off Update panel,RequiredFieldValidator work .

Why?This error is Beyond my intelligence.Pls Tell me and reply as possible as u can.

                                                        Regards,

                                                         PST

# June 2, 2009 3:35 AM

Pyie Sone Thein said:

I m in trouble with Browser.I write program with asp.net and using Ajax technology.But I was found error.I 'm using update panel  inside that update panel I put Detail View inside detail View I put  and used RequiredFieldValidator r. When I Enter Button,RequiredFieldValidator does not work.IF I take off Update panel,RequiredFieldValidator work .

Why?This error is Beyond my intelligence.Pls Tell me and reply as possible as u can.

                                                        Regards,

                                                         PST

# June 2, 2009 3:45 AM