2

使用 ASP.NET MVC 4、jQuery 1.6.2、jQuery UI 1.8.11。目前在 Firefox 16.0.2 中调试。

我试图让这个东西工作，所以我有一个可重用的 jQuery UI 模态对话框，autoOpen: false它可以从主页打开。到现在为止还挺好。该可重用的 jQuery UI 对话框将打开一个新的模态对话框，该对话框稍后会在需要时被销毁并再次创建（我试图使另一个也可重用但我失败了，它在第一个对话框中一直显示为 div，而不是作为新的单独对话应该如此，最终我决定每次需要时都创建它）。

当我第一次打开第一个对话框时，我可以毫无问题地打开和关闭第二个对话框。但是，当我关闭第一个对话框并再次打开它时，就会出现问题。它的行为就像我打开第一个对话框的次数一样多的对话框占位符 div。虽然我很确定我每次关闭它时都会销毁第二个对话框并删除占位符 div。

我已将对话框代码放入 /Views/Shared/_Layout.cshtml 文件中，并且该布局文件由主页引用。对于不熟悉 ASP.NET MVC 的人来说，布局文件是一个共享文件，其中包含定义网页布局的页眉、页脚和其他 html 元素，以便您可以从网站的任何视图中引用它. 因此，布局实际上与引用该布局的任何 View 一起呈现。

这是我的布局文件中的（伪）代码：

<html>
    <head>
        <script type="text/javascript">
            $.ajaxSetup({ cache: false });
            $(document).ready(function () {
                $("#veliki").dialog({
                    close: function () {
                        $("#veliki").html("");
                        $("#maleni").dialog("destroy");
                        $("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */
                    },
                    modal: true,
                    height: 600,
                    width: 800,
                    left: 0,
                    autoOpen: false
                });

                $(".openDialog").live("click", function (e) {
                    e.preventDefault();
                    $("#veliki").load($(this).attr('data-url'));
                    $("#veliki").dialog("open");
                });
            });
        </script>
    </head>
    <body>
        <div id="veliki"></div>
        @RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
    </body>
</html>

与第二个对话框相关的代码放置在引用另一个布局（不包含任何 jQuery 代码的布局）的视图之一中。该视图中的代码如下所示：

<script type="text/javascript">
    $(document).ready(function () {
        $(".openSubDialog").live("click", function (e) {
            e.preventDefault();
            $('<div id="maleni"></div>')
            .appendTo("body")
            .dialog({
                close: function () {
                    $("#maleni").dialog("destroy");
                    $("#maleni").remove();
                    $("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */
                },
                modal: true,
                height: 450,
                width: 600,
                left: 0
            })
            .load($(this).attr('data-url'));
        });
    });
</script>

把它们加起来：

  1. #veliki我通过单击主页中的链接打开对话框。
  2. 我通过单击第一个对话框中的链接来创建并打开#maleni对话框。
  3. 我关闭#maleni对话框，销毁它并删除#malenidiv。
  4. 我关闭#veliki对话框。
  5. #veliki我通过单击主页中的另一个链接打开对话框。
  6. 我创建并打开#maleni现在神奇地出现两次的对话框（如在 FireBug 中看到的）。
  7. 我用头撞墙，这并没有解决任何问题。

有人有想法吗？

4

1 回答 1

1

为什么不使用已经存在但内容不同的窗口？我用这个功能创建了一个小提琴：http: //jsfiddle.net/scaillerie/wEX42/。

要点是您不必处理窗口的close事件#maleni：您只需关闭它，$("#maleni").dialog("close");当您再次需要它时，您重新打开它：$("#maleni").dialog("open");。

在您的情况下，实施示例如下：

布局页面：

<html>
    <head>
        <script type="text/javascript">
            $.ajaxSetup({ cache: false });
            $(document).ready(function () {
                $("#veliki").dialog({
                    close: function () {
                        $("#maleni").dialog("close");
                    },
                    modal: true,
                    height: 600,
                    width: 800,
                    left: 0,
                    autoOpen: false
                });

                $("body").delegate(".openDialog", "click", function (e) {
                    $("#veliki").dialog("open").load($(this).attr('data-url'));
                });

                $("#veliki").delegate(".openSubDialog", "click", function (e) {
                    $("#maleni").dialog("open").load($(this).attr('data-url'));
                });
            });
        </script>
    </head>
    <body>
        <div id="veliki"></div>
        @RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
    </body>
</html>

子页面：

<div id="maleni"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#maleni").dialog({
                modal: true,
                height: 450,
                width: 600,
                left: 0,
                autoOpen: false
         })
         .load($(this).attr('data-url'));
        });
    });
</script>
于 2012-11-29T10:15:53.193 回答