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 .

Shouldn't your onClick event have btnConfigureAlerts_Click()? Why don't you just use a normal html button if you are just going to call the javascript function? — Hanlet Escaño
– Hanlet Escaño, Commented Sep 10, 2013 at 21:50
I believe she is wanting to trigger the code behind from the button inside the jquery dialog. I think your button ID needs to be "btnConfigureAlerts". — em_
– em_, Commented Sep 10, 2013 at 21:54
I apologize for the confusion, btnConfigureAlerts and btnSendAlertEmail are two different buttons — CodeNinja
– CodeNinja, Commented Sep 10, 2013 at 21:59

Guilherme de Jesus Santos · Accepted Answer · 2013-09-11 12:03:54Z

25

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

edited Sep 11, 2013 at 12:03

answered Sep 10, 2013 at 21:55

Guilherme de Jesus Santos

5,0936 gold badges45 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

CodeNinja Over a year ago

I just edited my code. Please check it , I have two buttons, and I think the button click event I am using is correct

Guilherme de Jesus Santos Over a year ago

@Agent007 ok, I added a example in my answer. Hope it help you.

CodeNinja Over a year ago

Hey Thanks This works ! Can you also tell me how I can use a drop downlist within jquery dialog. The DropdownList index is not changing currently.

Sumit Pathak Over a year ago

+1 i had same problem and problem is solved by u..thanks @GuilhermeJSantos

Jim S Over a year ago

Sure enough. I changed my aspx page to a user control, thus eliminating the jQuery load(), and then it worked fine with UseSubmitBehavior="false".

|

TombMedia · Accepted Answer · 2013-09-11 06:01:17Z

4

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

edited Sep 11, 2013 at 6:01

answered Sep 11, 2013 at 5:47

TombMedia

1,9722 gold badges23 silver badges29 bronze badges

2 Comments

CodeNinja Over a year ago

Hey TombMedia ! Thank you ! Somehow the solution doesnt work . I am wrapping the above code in a function called function ViewModalPopup2() . Do you think that would be causing the problem ?

TombMedia Over a year ago

No that wouldn't be the problem at all. Glad to see you got this sorted.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related