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. 

10 Comments

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

  • Unfortunately I'm working on that one right now.

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

  • 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!

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

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

  • Thanks man. I was also pulling out my hair!

  • 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.

  • You made my day today. Thanks!

  • 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

  • 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

Comments have been disabled for this content.