Replace javascript confirm by jquery confirm

Question

I use the following code to use default javascript confirm by jquery ui dialogue.

jQuery.extend({
    confirm: function(message, title, okAction) {
        jQuery("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
            buttons: {
                "Ok": function() {
                    jQuery(this).dialog("close");
                    return true;
                },
                "Cancel": function() {
                    jQuery(this).dialog("close");
                    return false;
                }
            },
            close: function(event, ui) { jQuery(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
    }
});

jQuery.confirm(
        "LogOut",
        "Do you want to log out",
        function() { 
        });

Now I need to use this same code in a log out action. So that I can replace the javascript confirm in the code.

<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>

The problem I am facing now is, when I replace the confirm with another function and wait for its return value to make the decision, the dialogue box doesn't return the value to a variable. These two functions are executed simultaniously(its showing the alert, but it also get directed to the href target). Is there any way that the method can return a true or false value and hence proceed to the href target.

reference: jQuery Extend , jQuery UI Replacement for alert
related question : js override confirm

Answer 1

I don't know if you could actually do that as the jQuery.dialog function is asynchronous.

You could use a promise library to setup the button click events. But then you cannot simply specify a method in the onclick attribute and have to do it through code

var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise

jsFiddle

jQuery.extend({
    confirm: function(message, title, okAction) {
        var d = jQuery.Deferred();
        jQuery("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
            buttons: {
                "Ok": function() {
                    jQuery(this).dialog("close");
                    d.resolve(true);
                    return true;
                },
                "Cancel": function() {
                    jQuery(this).dialog("close");
                    d.resolve(false);
                    return false;
                }
            },
            close: function(event, ui) { jQuery(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
        return d.promise();
    }
});

For more info about jQuery promise library see jQuery reference

Edit: Another way to to set it up: jsFiddle

Answer 2

The problem is that default confirm dialog is synchronus and block the whole browser UI. JQuery dialog is asynchronous and does not block UI (because it needs it to render).

So the answer to your problem is following. You need to change:

         buttons: {
            "Ok": function() {
                window.location = "/future/myhome/head?$event=logout"
            },

and

 <a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a>

Answer 3

Personally, I use confirm more for conditional execution of a function or posting a form...

So, using your example, I'd have made the following small changes:

buttons: {
         "Ok": function() {
              jQuery(this).dialog("close");
              okAction();  
         },

And then called the Confirm as follows:

onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>