How to use dialog-modal confirmation before deleting?

Question

This is the first time I'm use jQuery dialog_modal confirmation. I want to use this before deleting data inside ajax function. I'm still confused how to put this script correctly.

Before using this dialog I have some script like:

 $('#delete').click(function() {
          var params = $('#deletedata').serialize();
          $.ajax({
                   async  : false,
                   cache  : false,
                   data   : params,
                   success: function(res) {
                     //        oTable.fnReloadAjax();
                               $('#recline1').replaceWith("<div id='recline1'></div>");
                               $('#recmodel1').replaceWith("<div id='recmodel1'></div>");
                               $('#tabs').hide();
                               return this;
                               },
                   type   : "POST",
                   url    : "process1.php",
                   });
             return false;
        });

I want if delete is clicked, this dialog will appear then if we choose delete at dialog the deleting process will do, but if we choose no all opened tabs and this dialog will hide.

---

Edit

I have tried like this, and the dialog confirm can appear:

$('#delete').click(function() {
              $('#dialog-confirm').dialog('open');
              var params = $('#deletedata').serialize();
              ....

I am still confused in how to get button id inside modal confirmation then combine with ajax function?

Answer 1

You can put your ajax function into the button handler on the dialog initialise. Then open as you describe above.

$('#dialog-confirm').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Delete': function () {
            // Perform the delete
            $.ajax({
                url: "process1.php",
                success: function () {
                    ...
                }
            });
        },
        Cancel: function () {
            $(this).dialog('close');
        }
    }
});

Answer 2

Put two buttons inside your dialog-confirm div, 'Ok' and 'Cancel'

Upon clicking the 'Ok' button, call your ajax code (refactor it to a seperate function) and close the dialog.

Upon clicking the 'Cancel' button, just close the dialog.