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不會在任何地方被調用。