An ASP.NET button click event is not firing

Question

I have a button within a div which is hidden by default as it is used as a modal popup by jQuery UI.

The click event handler for this button never gets called, yet if I copy the button code outside of this hidden div then it works correctly. How do I get around this problem?

This is the code I have so far:

<div id="dialog" title="Notify Users">
    <div style="width:100%; height:500px; overflow:auto;">
       <asp:Repeater runat="server"  ID="rptNotify">
          <HeaderTemplate>
             <table>
          </HeaderTemplate>
          <ItemTemplate>
             <tr>
                <td>
                   <asp:CheckBox ID="chkUser" runat="server" Checked='<%# Eval("Checked") %>' />
                </td>
                <td>
                   <asp:Label ID="lblUser" runat="server" Text='<%# Eval("FullName") %>'/>
                </td>
             </tr>
          </ItemTemplate>
          <FooterTemplate>
             </table>
          </FooterTemplate>
       </asp:Repeater>
    </div>
    <asp:Button ID="btnSaveNotifications" runat="server" Text="Save" OnClick="btnSaveNotifications_Click" />
 </div>

The code to show /hide this div is:

<script>
     // Increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;

     $(function () {
        $("#dialog").dialog({
           autoOpen: false,
           show: "blind",
           hide: "explode"
        });

        $("#opener").click(function () {
           $("#dialog").dialog("open");
           return false;
        });
     });
</script>

How is the div hidden? CSS or another visibility mechanism? — Grant Thomas
– Grant Thomas, Commented Oct 6, 2011 at 10:16
Its done via Jquery I think, its an example I coppied from the Jquery website — Purplegoldfish
– Purplegoldfish, Commented Oct 6, 2011 at 10:20
what if u use button's click client event and from there go server side? — Boomer
– Boomer, Commented Oct 6, 2011 at 10:32

Community · Accepted Answer · 2017-05-23 11:43:48Z

12

The problem here is that jQuery-UI creates the dialog outside of the <form> element, so clicking on it never submits the form.

To get around this, rather than create a click event manually, you can just move the dialog <div> back into the form. I did a quick search and the answer to this question already covers the issue.

So you just need to make this change:

<script>
     // increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;

     $(function () {
        var dialog = $("#dialog").dialog({
                        autoOpen: false,
                        show: "blind",
                        hide: "explode"
                     });

        // Move the dialog back into the <form> element
        dialog.parent().appendTo(jQuery("form:first"));

        $("#opener").click(function () {
           $("#dialog").dialog("open");
           return false;
        });
     });
</script>

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 6, 2011 at 11:44

Kasaku

2,19216 silver badges26 bronze badges

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

1 Comment

Bachask8 Over a year ago

The only problem i see ( in my case ) is that the dialog is not a modal window, you can click anywhere in the form.

Community · Accepted Answer · 2017-05-23 11:43:48Z

1

A turnaround will be to change your button event to a client event, then trigger the server side event from client side.

See Stack Overflow question How to fire a button click event from JavaScript in ASP.NET.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 6, 2011 at 10:43

Boomer

1,4781 gold badge15 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:48Z

0

Beware that this has ramifications when using a iFrame in your dialog. Moving a div with a iFrame in it causes that iFrame to post twice or more. If you have implemented this, I would check to see if this is true in your case. I have posted a work-around that I found here: https://stackoverflow.com/a/24663205/3334255

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Jul 9, 2014 at 20:35

user3334255

12 bronze badges

Collectives™ on Stack Overflow

An ASP.NET button click event is not firing

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related