An ASP.NET button click event is not firing

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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.

Method 3

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x