javascript 带有布尔值返回值的 jQuery UI 对话框 - true 或 false

jQuery UI dialog with boolean return - true or false

提问by dipi evil

I′m trying to do an replacement for the javascriptconfirm(). I have found the jquery dialog() function that can be fully customized. The problem is that i cant make it return trueor false.

我正在尝试替换javascript确认（）。我找到了可以完全自定义的 jquery dialog() 函数。问题是我不能让它返回true或false。

Here is my code:

这是我的代码：

$('#delBox').dialog(
        { autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro',
            buttons: {
                "Ok": function () {
                    return true;
                }, "Cancelar": function () {
                    $(this).dialog("close");
                    return false;
                }
            },
            open: function () {
                var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')");
                buttonsSet.attr("class", "ui-button ui-state-default");
                $('.ui-dialog-titlebar-close span').empty();
                $('.ui-dialog-buttonset').find("button:contains('Ok')").button({
                    text: false,
                    icons: {
                        primary: 'ui-icon-ok'
                    }
                });

                $('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({
                    text: false, 
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
            }
        });

This only return an object before any option selected:

这只会在选择任何选项之前返回一个对象：

function deletar() {
     alert($('#delBox').dialog('open'));
}

回答by Alnitak

jQueryUI dialog boxes can't return a trueor falseas they're shown on top of other content but withoutblocking execution.

jQueryUI 对话框不能返回true或false因为它们显示在其他内容之上但不会阻止执行。

The best you can do is:

你能做的最好的是：

1. make the box modalso that it hides the other content

2. supply callbacks to be used depending on which option is chosen.

1. 制作盒子modal以隐藏其他内容

2. 根据选择的选项提供要使用的回调。

For extra bonus points, you could create a $.Deferred()promise object and return that when you show the dialog. You can then resolveor rejectthat promise in the button event handlers.

对于额外的奖励积分，您可以创建一个$.Deferred()promise 对象并在显示对话框时返回该对象。然后，您可以在按钮事件处理程序中resolve或reject该承诺。

This would give you clean separation between showing the dialog box, and performing the actions subsequently triggered by it:

这将使您在显示对话框和执行随后由它触发的操作之间完全分开：

function showDialog() {
   var def = $.Deferred();

   // create and/or show the dialog box here
   // but in "OK" do 'def.resolve()'
   // and in "cancel" do 'def.reject()'

   return def.promise();
}

showDialog().done(function() {
    // they pressed OK
}).fail(function() {
    // the pressed Cancel
});

// NB: execution will continue here immediately - you shouldn't do
//     anything else now - any subsequent operations need to be
//     started in the above callbacks.

回答by Peter Munnings

The first answer is fine - I thought I'd just add a bit of code showing how you can return the button that was clicked:

第一个答案很好 - 我想我只需要添加一些代码来展示如何返回被点击的按钮：

function ShowYesNoMessage(title, message) {
var def = $.Deferred();
$("#infoMessage").html(message);

$("#dialog_infoMessage").dialog({
    modal: true,
    title: title,
    buttons: {
        Yes: function () {
            $("#infoMessage").html("");
            $(this).dialog("close");
            def.resolve("Yes");
        },
        No: function () {
            $("#infoMessage").html("");
            $(this).dialog("close");
            def.resolve("No");
        }
    }
});
return def.promise();
}


$.when(ShowYesNoMessage("Are you sure", message)).then(
            function(status) {
                if (status == "Yes") {
                    //do the next step
                }
            }
        );