jQuery: how to use dialog-modal confirmation before deleting?

Question

This is the 1st time i'm use jQuery dialog_modal confirmation. i want to use this before deleting data inside ajax function. i'm still confuse how to put this script correctly.

Before use 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.

please help for advance.thanks :)

---

Edit

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

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

i still confuse in how to get button id inside modal confirmation then combine with ajax function?

Answer 1

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.

Answer 2

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');
        }
    }
});