ASP.net Button on click not firing using Jquery Modal Dialog

Question

I have a div that is shown as a Modal dialog.

<div id="div2" style="display: none;" title="Upload Prenda">
        <center>
            <br />
            Select File to Upload:
            <asp:FileUpload ID="PrendaFileUpload" runat="server" Width="345px" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="PrendaFileUpload"
                ErrorMessage="File to be uploaded Required" ValidationGroup="X">*</asp:RequiredFieldValidator><br />
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True"
                ShowSummary="False" ValidationGroup="X" />
            <br />
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <asp:Button ID="uploadButton" runat="server" Text="Upload" OnClick="uploadButton_Click"
                 Width="100px" />
        </center>
    </div>

here is the jquery for it

 <script type="text/javascript">
$(function() {
$( "#div2" ).dialog({
autoOpen: false,
modal:true,
resizable: false,
 height: 200,
width: 600
});
$( "#toggle" ).click(function() {
$( "#div2" ).dialog( "open" );
});
});
</script>

the problem is after i press the button to activate the OnClick="uploadButton_Click" the method inside does not fire, any fix for this? sorry im just new in using jquery.

I think you will find that the problem is that jQuery dialogs are done is such a way that removes them from the normal ASP.NET form tags. I had this problem about a year ago and can't remember exactly what I did, or where I found the answer. Pretty sure it was on this site somewhere. If I can find it I will update this with a link to the answer. There was a pretty simple fix, it's just tricky to find. — Tyler Durden, Nov 21 '13 at 03:57

score 15 · Accepted Answer · edited May 23 '17 at 12:01

15

Well this is the answer that worked for me, im not using any update panel and this is what i used

adding this to the dialog declaration:

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

found the answer in here so if you want to know more about click the link beside :)

edited May 23 '17 at 12:01

Community

1
1

answered Nov 21 '13 at 05:54

Albert Laure

1,702
5
20
49

score 3 · Answer 2 · answered Jun 08 '16 at 14:53

The newer versions of JQueryUI use a slightly different convention. In your .dialog() declaration, add this is a parameter:

appendTo: "form",

This fixes the issue for new versions of JQuery, since it builds the dialog box outside the scope of the ASP.NET form. Hope this helps newer users!

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

Try this solution: jQuery modal dialog with postbacks in ASP.NET

This tells jQuery to append the dialog to the form tag rather than the end of the document.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 21 '13 at 03:44

Tyler Durden

1,016
15
24

@TylerDurden the solution above did not work for me, im using 1.8 jquery UI – Albert Laure Nov 21 '13 at 05:29
@user2705620 apologies but I only just now got notified of this comment. I am assuming that you have solved this issue by now? ;) – Tyler Durden Jul 26 '17 at 02:03

score 1 · Answer 4 · edited Sep 13 '16 at 09:54

1

This query will fire C# code from JQuery. I tested it:

 $(this).parent().appendTo($("form:first"));

edited Sep 13 '16 at 09:54

Box Box Box Box

5,094
10
49
67

answered Sep 13 '16 at 09:53

user5940155

19
1

ASP.net Button on click not firing using Jquery Modal Dialog

4 Answers4