jQuery UI：模型对话框“关闭”

Question

我有2个Razor视图，其中一个在jQuery UI对话框中加载另一个。 在对话框中加载的视图中； 我正在打开另一个jQuery UI对话框以显示一条消息。

目的是在单击消息对话框的“ Cancel按钮时关闭两个对话框。

剃刀代码如下：

主视图

<button id="openModel" onclick="openModel()">

<div id="mainDialog" />

<script type="text/javascript">
    function openModel() {
        $('#mainDialog').dialog({
            open: function () {
                // loading "the secondary view in the model dialog"
                // url: controller-action url to load the second view
                $(this).load('url'); 
            }
        });
    }
</script>

对话视窗

<button id="messageOpener">Verify</button>

<div id="messageDialog" />

<script type="text/javascript">

    $(document).ready(function () {

        $("#messageOpener").click(function () {
            $("#messageDialog").dialog("open");
                return false;
        });

        $("#messageDialog").dialog({
            buttons: {
                Retry: function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    // **** ?? must close both dialogs. ****
                }                
            },
            autoOpen: false,
        });
    });

</script>

我尝试了以下方法来关闭对话框：

方法01：

$(".ui-dialog-content").dialog("close");

方法02：

$(this).dialog("close");
$("#mainDialog").dialog("close");

方法03：

$(".ui-dialog:visible").find(".dialog").dialog("close");

但以上所有内容均未按预期关闭对话框，而是产生以下JS错误：

未捕获错误：无法在初始化之前在对话框上调用方法； 试图调用方法“关闭”
v.extend.error
（匿名功能）
v.extend.each
vn.v.each
e.fn.（匿名函数）
$ .dialog.buttons.Cancel
点击
v.event.dispatch
o.handle.u

Answer 1

通过以下方式重新编写代码即可解决问题。

1.主视图

<button id="openModel" onclick="openModel()">

<div id="mainDialog" />

<script type="text/javascript">

    var $modelDialog = $('#mainDialog').dialog({
        autoOpen: false,
        open: function () {
            // loading "the secondary view in the model dialog"
            // url: controller-action url to load the second view
            $(this).load('url'); 
        }
    });

    function openModel() {
        $modelDialog.dialog('open');    
    }

    function closeModel() {
        $modelDialog.dialog('close');    
    }

</script>

2.对话框视图

<button id="messageOpener">Verify</button>

<div id="messageDialog" />

<script type="text/javascript">

    var $messageDialog;

    $(document).ready(function () {

        $("#messageOpener").click(function () {
            $messageDialog.dialog("open");
                return false;
        });

        $messageDialog = $("#messageDialog").dialog({
            buttons: {
                Retry: function () {
                    $messageDialog.dialog("close");
                },
                Cancel: function () {
                    // [!!]
                    $messageDialog.dialog("destroy");
                    closeModel();
                }                
            },
            autoOpen: false,
        });
    });

</script>

Answer 2

方法2看起来不错，但是您遇到该错误，原因是当您尝试关闭message对话框时， mainDialog模态未打开。 同样，函数openModel不会在任何地方被调用。