Mimicking a confirm() using jqueryUI Dialog

Question

I would like to mimic a standard JavaScript confirm() using a jQueryUI dialog. I was thinking of something like the following, but I am obviously not understanding how it should work. Any suggestions? Thank you

return $("#dialog-cancel").dialog("open");

$("#dialog-cancel").dialog({
    autoOpen: false,height: 400,width: 350,modal: true,
    open: function(event, ui){},
    buttons: {'OK': function(){$(this).dialog("close");return true;},'CANCEL': function() {$(this).dialog("close");return false;}}
});

possible duplicate of [Jquery UI dialog in place of javascript confirm](http://stackoverflow.com/questions/7015499/jquery-ui-dialog-in-place-of-javascript-confirm) — Didier Ghys, Jan 18 '12 at 16:21
Actually, Maybe I still don't understand. How do I get the response of the dialog back to the original calling script? — user1032531, Jan 18 '12 at 16:42
You can't implement it to work EXACTLY like the `confirm` method. You have to define methods to run when the user clicks either of the buttons. You won't be able to use it in an if statement. — Kevin B, Jan 18 '12 at 16:44
Thanks Kevin, How you described is how I have done them in the past. For this time, I wanted an identical looking dialog to be triggered by two different actions, but then do a different confirmed method for each one. — user1032531, Jan 18 '12 at 16:50

score 5 · Accepted Answer · edited May 23 '17 at 12:06

The duplicate is not really useful indeed. I'm sorry for that.

Based on this answer, this what I would do:

create a function that will create a basic modal dialog with a message and OK/Cancel buttons
accept two callbacks for both buttons executed when they are clicked

The benefit is that it does not block the whole browser with an infinite loop like in the answer. The option modal of the jQuery UI dialog simply blocks the current page.

Here's the code:

function confirmDialog(message, onOK, onCancel) {

    $('<div>' + message + '</div>').dialog({
        modal: true,
        buttons : {
            "OK" : function() { 
                $(this).dialog("close");

                // if there is a callback, execute it
                if (onOK && $.isFunction(onOK)) {
                    onOK();
                }

                // destroy the confirmation dialog
                $(this).dialog("destroy");
            },
            "Cancel" : function() {
                $(this).dialog("close");
                if (onCancel && $.isFunction(onCancel)) {
                    onCancel();
                }
                $(this).dialog("destroy");
            }
        }
    });

}

And you can use it this way:

$('button').click(function(e) {

    var okHandler = function() {
        alert('ok');
    };

    confirmDialog('Do you really want ?', okHandler);
});

DEMO

Sorry for all the newbie questions, but callback functions are rather foreign to me. How about if I wanted to send something to onOk such as $('button'). I tried ...$t=$(this);var okHandler = function($t) {... but it didn't work. — user1032531, Jan 18 '12 at 17:19
How to explain. You can first read [this article](http://recurial.com/programming/understanding-callback-functions-in-javascript/) and [this one](http://onemarco.com/2008/11/12/callbacks-and-binding-and-callback-arguments-and-references/). Sounds tedious but callbacks are a big part of javascript. The thing is, you can't have arguments like you want to do for the `okHandler` **but** you can use your `$t` variable within the function without passing an argument because the scope remains. **I have updated the jsfiddle for you to see. Check the `$span` variable.** — Didier Ghys, Jan 18 '12 at 17:30
Ha ha, I was ready your first suggested article before getting your response. I read the second and give it a bit more thought. Thanks! — user1032531, Jan 18 '12 at 17:34

Mimicking a confirm() using jqueryUI Dialog

1 Answers1

Linked