javascript - 如何使用 jQuery/UI 的对话框阻止对话框 ("open") 调用

Question

我正在尝试创建一个显示模式对话框的函数，该函数在调用时会阻塞直到对话框关闭，这将允许将结果返回给调用者

以下函数是一个尝试，有两个问题。

1. 它会在对话框仍打开时返回结果。
2. 选择器测试找不到对话框，使用 firebug 检查发现，创建对话框后 id 元素就丢失了。

.

function getCountrySelection() {
    var ctryCode;
    var dlg = $("#JS-field-dlg-ctry-select");

    if (dlg.size() === 0) {
        dlg = $("<div id='JS-field-dlg-ctry-select' title='Select Country' class='dialog-fields'></div>");
        dlg.append("Customer found in both Australia and New Zealand");
        dlg.dialog({
            autoOpen: false,
            width: 400,
            height: 160,
            modal: true,

            buttons: {
                "Australia": function() {
                    ctryCode = "au";
                    $(this).dialog("close");
                },
                "New Zealand": function() {
                    ctryCode = "nz";
                    $(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
    }

    dlg.dialog('open');

    return ctryCode;
}

编辑:我想我会展示我如何调用它:

buttons: {
    "Find": function() {
        var custAu = JS.sales.getCustomer("au", inpCust.val());
        var custNz = JS.sales.getCustomer("nz", inpCust.val());

        var cust;
        if (custAu === undefined && custNz === undefined) {
            alert('No customer could be found with that number.');
            return;
        } else if (custAu !== undefined && custNz !== undefined) {
            var ctry;
            getCountrySelection(function(result) {
                ct = result;
            });
            if (ctry === "au") {
                cust = custAu;
            } else if (ctry === "nz") {
                cust = custNz;
            } else {
                return;
            }
        } else if (custNz === undefined) {
            cust = custAu;
        } else {
            cust = custNz;
        }

        if (cust) {
            $(this).dialog("close");
            // Do something with cust.
        } else {
            alert('Customer could not be found.');
        }
    },
    "Cancel": function() {
        $(this).dialog("close");
    }
}

Answer 1

在对话框关闭之前无法阻止执行； JavaScript 不允许“暂停”执行。你最好的选择是改变你的职能契约(Contract)；它应该接受一个回调函数，而不是立即返回值，一旦对话框关闭，它将使用结果调用该函数。然后调用此函数的代码将提供一个合适的回调，可以在其中继续执行。

类似这样的事情:

function getCountrySelection(callback) {
(...)
            buttons: {
                "Australia": function() {
                    $(this).dialog("close");
                    callback("au");
                },
                "New Zealand": function() {
                    $(this).dialog("close");
                    callback("nz");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                    callback();
                }
            }
        });
    }
    dlg.dialog('open');
}

然后使用:

getCountrySelection(function(result) {
    if (result) {
        ...handle result...
    } else {
        ...the user cancelled the dialog...
    }
});

这与 AJAX 调用基本相同；您无法“暂停”AJAX 调用以等待 AJAX 实际完成并返回结果，因此“异步”。

编辑:在您的具体示例中，您可以像这样使用它:

buttons: {
    "Find": function() {
        var custAu = JS.sales.getCustomer("au", inpCust.val());
        var custNz = JS.sales.getCustomer("nz", inpCust.val());

        if (custAu === undefined && custNz === undefined) {
            alert('No customer could be found with that number.');
            return;
        } else if (custAu !== undefined && custNz !== undefined) {
            getCountrySelection(function(ctry) {
                var cust;
                if (ctry === "au") {
                    cust = custAu;
                } else if (ctry === "nz") {
                    cust = custNz;
                } 
                handleCustomer(cust);
            });
        } else if (custNz === undefined) {
            handleCustomer(custAu);
        } else {
            handleCustomer(custNz);
        }

        function handleCustomer(cust) {
            if (cust) {
                $(this).dialog("close");
                // Do something with cust.
            } else {
                alert('Customer could not be found.');
            }            
        }
    },
    "Cancel": function() {
        $(this).dialog("close");
    }
}