Button in UpdatePanel requires two clicks to fire

Question

Hi,

I am using VB.NET and Webforms with MS AJAX.

I have a button in an MS AJAX Update Panel. When the page is loaded the button's visibility is set to 'false' declaratively.

After the user has checked a check box (also in the UpdatePanel), I set the button's visiblity to true and it becomes visible as expected.

However, the user has to click on the button twice for anything to happen. The first click merely puts focus on the button. Another click is required to get the postback to occur (verified visually and with breakpoints)

Any idea why this might be?

Many thanks!

Anthony

Answer 1

Do you have a validator on the page with dynamic display?

If the validator is displayed and you mouse down on the button, the validator can push the button out from under your mouse, so when you lift your finger you don't actually cause the click event to trigger.

If this is the case, you can fix this by setting the validator's display property to static.

Other Thoughts:

Is there any javascript running on the button's client side onclick, onmousedown, onmouseup?

Are you dynamically adding this button to the page?

Do you set the CheckBox's AutoPostBack property to True or False? If it is set to true, you might be in the middle of a async postback while you click the button.

Answer 2

I tested this in IE6 and Firefox 3.5 and it works fine for me. Is your configuration different?

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" Text="Checkbox" />
        <asp:Button ID="Button1" runat="server" Text="Button" Visible="False" OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

protected void CheckBox1_CheckedChanged( object sender, EventArgs e )
{
    Button1.Visible = CheckBox1.Checked;
}

protected void Button1_Click( object sender, EventArgs e )
{
    Label1.Text = DateTime.Now.ToString();
}

Answer 3

Wild guess: do you check the value of the checkbox in the Init or Load stage of your page? Because of the page cycle, the checkbox controls will then not have set their reposted values yet and will appear unchecked. Only in the second postback, your code will see the checked status correctly (loading from viewstate) and the button is displayed.

Set the visibility in the checkboxes Change event or in PreRender.

Answer 4

Thanks for your input.

I have a 3rd Party File Upload control in the UpdatePanel along with the button and this appears to cause a conflict with the button.

I have resorted to solving the issue with javascript. I add the following method near the top of the page:

<script language="javascript" type="text/javascript">
    function DisplayImportButton() {
        document.getElementById('<%= btnImport.ClientId %>').style.visibility = "visible";
    }
</script>

I add the following to the bottom of the page so the button is always hidden at the start:

<script language="javascript" type="text/javascript">
    var elem;

    elem = document.getElementById('<%= btnImport.ClientId %>');

    if (elem) {        
        elem.style.visibility = "hidden";
    }
</script>

In the handler for the change of the checkbox's checked status I added:

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "ImportButtonScript", _
        "DisplayImportButton();", True)

Kind regards,

Anthony