CODEWITHSUNDEEP
c#javascriptjqueryasp.netvisual-studio-2010
CodeNinja
CodeNinja

Reputation: 3278

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

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 .

Upvotes: 15

Views: 13588

Answers (2)

Guilherme de Jesus Santos
Guilherme de Jesus Santos

Reputation: 5063

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

Upvotes: 25

TombMedia
TombMedia

Reputation: 1972

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"); }

Upvotes: 4

Related Questions