Thursday, 11 October 2007

Button trigger UpdatePanel fails in FireFox

Firefox drove me crazy! I have spend hours to work out why it does not work, and the reason is: it does not have an image url but have alt text (and my Button is an ImageButton).

To demonstrate this, here is an example:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="Html" runat="server" Visible="true">
Please submit
</div>

<asp:ImageButton id="SubmitButton" ImageUrl="submit_btn.gif"
onclick="SubmitButton_Click" alt="Submit" runat="server"
OnClientClick="this.style.display='none';"></asp:ImageButton>
<asp:ImageButton id="AmendButton" onclick="AmendButton_Click" alt="Amend"
runat="server" OnClientClick="this.style.display='none';"></asp:ImageButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AmendButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SubmitButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

And the code behind is very simple:

        protected void SubmitButton_Click(object sender, ImageClickEventArgs e)
{
Html.InnerHtml = "Please Amend";
}

protected void AmendButton_Click(object sender, ImageClickEventArgs e)
{
Html.InnerHtml = "Please Submit";
}

The page looks like this:


s


If you click the submit button, it becomes:


a


As expected. However if you click the alt text "Amend", it will refresh the whole page instead of updating just the update panel. Basically I mean it does not work. The only solution is, of coz, give it a valid image!!!


Wasted me several hours! Now I am going home, it's 7:00pm already!

3 comments: