No postback after user confrim in jquery dialog box

Question

I am newsiest on jQuery. I need to show the dialog box to get the user response. If the use click confirm, I need to update the database on sever. I found the example jQuery dialog Confirm-JSFiddle and followed the code. However, after the user click confirm, it is not postback to server. Would someone tell me how to fix it.

There is my jQuery script code:

           $(document).ready(function() {
               $("#dialog-confirm").dialog({
                   autoOpen: false,
                   modal: true
               });
           });

           $(function() {

               $("#dialog-confirm").dialog({
                   autoOpen: false,
                   modal: true,
                   buttons : {
                       "Confirm" : function() {
                           $(this).dialog("close");
                           return true;        
                       },
                       "Cancel" : function() {
                           $(this).dialog("close");
                           return false;
                       }
                   }
               });

               $("#Button1").on("click", function(e) {
                   e.preventDefault();
                   $("#dialog-confirm").dialog("open");
               });

           });

There is the code on vb.net

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Dim i As Integer = 0
End Sub

There is the button on aspx page

  <asp:button id="Button1" runat="server"  text="test" visible="true" />

score 0 · Accepted Answer · answered Oct 27 '17 at 01:20

You're just need one step to do postback by using appendTo function to bind with target form:

$("#Button1").on("click", function(e) {
    e.preventDefault();
    $("#dialog-confirm").dialog("open");  
    $("#dialog-confirm").parent().appendTo($("form:first"));
});

<asp:Button id="Button1" runat="server"  text="test" visible="true" OnClick="Button1_Click" />

Of course, if you're using dynamic client ID (without ClientIDMode="Static" attribute at asp:Button), you need to use ClientID instead of button's server ID:

$("#<%= Button1.ClientID %>").on("click", function(e) {
    e.preventDefault();
    $("#dialog-confirm").dialog("open");
    $("#dialog-confirm").parent().appendTo($("form:first"));
});

Or you can embed appendTo into dialog setting (with jQuery 1.10 and above):

$("#dialog-confirm").dialog({
    autoOpen: false,
    modal: true,
    buttons : {
        "Confirm" : function() {
            $(this).dialog("close");
            return true;        
        },
        "Cancel" : function() {
            $(this).dialog("close");
            return false;
        }
    },
    appendTo: "form" // append this setting
});

If appendTo doesn't work with your page, try __doPostBack method (but not guaranteed to work with all browsers):

__doPostBack('<%= Button1.UniqueID %>', '');

Similar issues:

jQuery UI Dialog with ASP.NET button postback

jQuery modal form dialog postback problems

No postback after user confrim in jquery dialog box

1 Answers1