Question

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

以下功能是一个有两个问题的尝试。

在对话框仍处于打开状态时返回结果。
选择器测试找不到对话框，使用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不允许＆＃34;暂停＆＃34;执行。你最好的办法是改变你的职能合同;它不应该立即返回值，而应该接受一个回调函数，一旦对话框被解除，它将调用结果。然后调用它的代码将提供一个合适的回调函数，可以继续执行它。

这样的事情：

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调用基本相同;你不能暂停＆＃34;你的AJAX调用等到AJAX实际完成并返回结果，因此＆＃34;异步＆＃34;。

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

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

如何使用jQuery / UI Dialog阻止对话（“打开”）调用

1 个答案: