Question

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

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

Razor代码如下：

主视图

<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
  v.fn.v.each
  e.fn.（匿名函数）
  $ .dialog.buttons.Cancel
  r.click
  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看起来很好，但是你得到了这个错误，因为当你试图关闭mainDialog对话框时没有打开message模态。此外，函数openModel不会在任何地方被调用。

jQuery UI：模态对话框'关闭'

2 个答案: