jquery datatable - "jqueryui modal"がページ内に重複ダイアログhtmlを作成しています

Question

私は、ASP.NETアプリケーションでjQuery datatable - jQuery UIモーダル機能を実装しようとしています。

https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html

私は見ています問題がある（下記のように）、ダイアログボックスは、ページ内の重複のhtmlエントリを作成しています。

私もDataTableのウェブサイトで問題を見ることができます（ダイアログを起動するために各行のプラス記号をクリックしてください。HTMLエントリを複製が作成されます。）

どれ提案/勧告へ重複したエントリを避けることができます。

Answer 1

問題は、クリックするたびに新しいモーダルが作成されるのに対し、閉じると表示プロパティはnoneに変更され、DOMに残されます。

DOMを閉じた後にDOMからモーダルを削除する必要があります。幸運なことに、jQuery UIはかなり堅牢なAPIを備えており、モーダル（ダイアログ）にはあなたが聞くことができるイベントがあります。

あなたの特定のセレクタがあなたのモーダルにどのようなものかわからないので、以下の調整が必要ですが、基本的にダイアログのクローズイベントをリッスンして閉じることができます。

$(".selector").dialog({ 
    close: function(event, ui) { 
    $(this).remove(); 
    } 
}); 

Answer 2

[OK]をここに追加して本当に他の多くの人に役立てたいと思っていました。このためのすべての回避策を試した後、私は本当に重要なことを学びました。ダイアログウィンドウに完全なDOMをロードすると、別のインスタンスが作成され、大きな時間を費やすことになります。私の場合は、MVCで部分的なビューをロードしています。私はループを使って重複を破棄、削除、および手動で削除しようとすることについて多くの記事を見てきました。これらは本当の答えではなく、別の問題に対するバンドエイドです。また、ダイアログにデータをロードするときには、Ajax呼び出しを行う際に、プロセス内でスクリプトを二重にロードしていないように注意する必要があります。 $（ '。selector'）。dialog（）。dialog（）を呼び出す必要がある場合、最初のインスタンスに何らかの問題があります。

私の解決策は他には何もしませんでした。 1）部分ビューを変更して、必要な内部HTMLのみを含むようにしました。 2）データを取得するとDOM全体が返されるため、find（）を使用してダイアログに返された内容を制限しました。 3）ダイアログを閉じるときは、ダイアログ（「閉じる」）メソッドを使用します。

リフレッシュの問題がある場合は、ダイアログを慎重に作成することで、時折競合が発生する可能性があるため、docの準備ができていない構造を見逃してしまいました。このダイアログは、使用すると構築できます。

実際にどのようなデータが返されているか注意してください。奇妙な動作が発生します。

これは、以下のように期待通りに機能します。これは、これが誰かのために無限の何時間も節約することを本当に願っています。

var editOptDialog = YourOptions 

Open: 
     $("#dialog-edit").dialog(editOptDialog); 
     $("#dialog-edit").dialog('open'); 
     $.get($(element).attr('url'), function (data) { 
      $("#dialog-edit").dialog().html($(data).find('#content-modal')); 
     }); 
Close: 
     $("#dialog-edit").dialog().dialog("instance").close();