javascript - ダイアログ内のダイアログが N 回レンダリングされる

Question

ASP.NET MVC 4、jQuery 1.6.2、jQuery UI 1.8.11 を使用します。現在、Firefox 16.0.2 でデバッグ中です。

私はこのことを機能させようとしているのでautoOpen: false、メインページから開かれる再利用可能なjQuery UIモーダルダイアログがあります。ここまでは順調ですね。その再利用可能なjQuery UIダイアログは新しいモーダルダイアログを開き、後で破棄され、必要に応じて再度作成されます（他のダイアログも再利用可能にしようとしましたが失敗しました。新しい個別のダイアログではなく、最初のダイアログのdivとして表示され続けましたダイアログがあるべきなので、最終的には必要になるたびに作成することにしました)。

最初のダイアログを最初に開くと、2 番目のダイアログを問題なく開いたり閉じたりできます。ただし、最初のダイアログを閉じて再度開くと、問題が発生します。最初のダイアログを開いた回数と同じ数のダイアログプレースホルダー div があるように動作します。私は2番目のダイアログを破棄し、それを閉じるたびにプレースホルダーdivを削除すると確信しています。

ダイアログコードを /Views/Shared/_Layout.cshtml ファイルに配置し、そのレイアウトファイルをメインページから参照します。ASP.NET MVC に慣れていない方のために説明すると、レイアウトファイルは、Web ページのレイアウトを定義するヘッダー、フッター、およびその他の HTML 要素を含む共有ファイルであるため、Web サイトの任意のビューから参照できます。 . したがって、レイアウトは、そのレイアウトを参照するビューとともに実際にレンダリングされます。

私のレイアウトファイルの（疑似）コードは次のとおりです。

<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>

2 番目のダイアログに関連するコードは、別のレイアウト (jQuery コードを含まないレイアウト) を参照するビューの 1 つに配置されます。そのビューのコードは次のようになります。

<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>

要約すると：

#velikiメインページのリンクをクリックしてダイアログを開きます。
#maleni最初のダイアログのリンクをクリックして、ダイアログを作成して開きます。
ダイアログを閉じて#maleni破棄し、#malenidiv を削除します。
ダイアログを閉じ#velikiます。
#velikiメインページの別のリンクをクリックしてダイアログを開きます。
魔法のように 2 回表示されるダイアログを作成して開きます#maleni(FireBug で見られるように)。
何も解決しない頭で壁を叩きつける。

アイデアのある人はいますか？

score 1 · Accepted Answer

既存のウィンドウをさまざまなコンテンツで使用しないのはなぜですか? この機能を備えたフィドルを作成しました: 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>

javascript - ダイアログ内のダイアログが N 回レンダリングされる

1 に答える 1

Related

Reference