用jquery确认替换javascript确认

时间:2013-10-15 06:20:40

标签: javascript jquery jquery-ui

我使用以下代码通过jquery ui对话使用默认的javascript确认。

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

现在我需要在注销操作中使用相同的代码。这样我就可以在代码中替换javascript确认。

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

我现在面临的问题是,当我用另一个函数替换确认并等待其返回值做出决定时,对话框不会将值返回给变量。这两个函数同时执行(它显示警报,但它也被定向到href目标)。是否有任何方法可以返回true或false值,从而进入href目标。

参考:jQuery ExtendjQuery UI Replacement for alert
相关问题:js override confirm

3 个答案:

答案 0 :(得分:4)

我不知道你是否真的可以这样做,因为jQuery.dialog函数是异步的。

您可以使用promise库来设置按钮单击事件。但是,您不能简单地在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 promise library的更多信息,请参阅jQuery reference



编辑:另一种设置方式:jsFiddle

答案 1 :(得分:2)

问题是默认confirm对话框是同步的并阻止整个浏览器UI。 JQuery对话框是异步的,不会阻止UI(因为它需要渲染)。

所以问题的答案如下。你需要改变:

         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 :(得分:0)

就个人而言,我更多地使用确认函数的条件执行或发布表格......

所以,使用你的例子,我做了以下小改动:

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

然后调用确认如下:

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