Cannot click on an asp.net button within a jquery dialog

Question

I already did search online, and try a few solutions provided, but none of them are working for me.

I have a button within a div. I am displaying the div within a jquery dialog. The button click doesnt work within the jquery dialog.

I have my code below :

aspx

    <div id='one'>
 <asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
            <asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
            <asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click"/>
            </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

jquery

function ViewModelPopup2() {
            $("#ViewModalPopupDiv2").dialog({
                scrollable: true,
                width: 800,
                modal: true
            });
        }

aspx.cs

protected void btnSendAlertEmail_Click(object sender, EventArgs e)
        {

            // Code to send email

        }

protected void btnConfigureAlerts_Click(object sender, EventArgs e)
        {

        ScriptManager.RegisterStartupScript
                       (this, this.GetType(), "callScriptFunction", "ViewModelPopup2();", true);
        }
    }

Please let me know what I need to do , to trigger the server control events .

Answer 1

I also had this problem with asp.net buttons and jQuery UI Dialog. To solve it you need to set in your aspnet button the tag UseSubmitBehavior to false.

If UseSubmitBehavior attribute is set to true (this is the default value), the button will use the browser's submit mechanism (and jQuery Dialog UI is manipulating it), if UseSubmitBehavior is set to false, the button will use a client-side script that asp.net framework includes in the page to post to the form.

So your HTML should be like this :

<div id='one'>
<asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
            <asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
            <asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click" UseSubmitBehavior="false" />
            </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

More details at http://msdn.microsoft.com/library/system.web.ui.webcontrols.button.usesubmitbehavior.aspx

Answer 2

This is the classic, thanks for moving my dialog jQuery, question.

jQuery UI for some reason moves your dialog code to the bottom of the html markup, outside of your form tag. You need to move the dialog back into the form with some more jQuery:

dlg.parent().appendTo(jQuery('form:first'));

where dlg is your jQuery.UI dialog object.

        var dlg = $("#ViewModalPopupDiv2").dialog({
            scrollable: true,
            width: 800,
            modal: true
        });
        dlg.parent().appendTo(jQuery('form:first'));

That should get things working for you again. Cheers!

If that doesn't work, try doing that in the open event:

open: function(type,data) { $(this).parent().appendTo("form"); }