Geek Answers Handbook

Replace javascript confirmation with jquery confirm

I use the following code to use the default javascript validation via jquery ui dialog.

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 the same code in the logout action. So I can replace javascript validation in code.

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

The problem that I am facing now is that when I replace the confirmation with another function and wait for its return value to make a decision, the dialog box does not return the value of the variable. These two functions are performed simultaneously (showing a warning, but also fall into the href target). Is there a way that a method can return true or false value and therefore move on to the href target.

: jQuery Extend, jQuery UI
: js

+4
3

, confirm . JQuery ( ).

, . :

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


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

, , jQuery.dialog .

. onclick

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

jQuery . jQuery



: : jsFiddle

+4

Personally, I use confirmation to conditionally execute a function or post a form ...

So, using your example, I would make the following small changes:

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

And then call Confirm like this:

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

More articles:


All Articles