この問題と与えられた以前の答えに取り組んだ後、私は答えから欠落しているいくつかの重要な詳細を発見しました。ここで最も重要な点は.dialog("destroy")
、divを初期化前の状態に復元する一方で、divをDOM内の元の場所に復元しないことです。(BAHDevの質問は、最初にUIダイアログがどのようにdivを移動するかについて言及しています。)これはAjax操作にとって重要であり、divの場所のこの変更/非変更は、jQueryドキュメントで明確にする必要があります(これにより、多くのことが節約されます)時間)。
ダイアログdivのコンテンツのみをAjaxする場合、DOMのどこにあるかに関係なく、divのコンテンツを簡単に見つけて書き換えることができるため、この動作はおそらく重要ではありません。ただし、ダイアログコンテンツが他のオブジェクトとインラインでAjaxedされる場合、divを元の場所から移動すると、後でAjaxingが元の場所に別のdivを作成し、同じIDの複数のdivが作成される可能性があります。
たとえば、1回のAjax呼び出しで、製品の短いリストと製品の長いリストを要求します。短いリストは画面に移動し、長いリストは非表示のダイアログに移動します。リストは関連しているため、1回のAjax呼び出しで両方を取得することは理にかなっています。UI Dialogは、Ajaxされたコンテナから長いリストを移動し、HTML本文の最後に貼り付けたため、新しいリストをリクエストすると、同じIDを持つ2つのdivが作成され、それぞれに異なる長いリストが含まれます。 --1つはAjaxコンテナにあり、もう1つは本体の端にあります。これを処理するために私が見る最も正しい方法は、新しいリストをAjaxする前に、最初に古い長いリストを完全に破棄することです。(UIダイアログオブジェクトをチェックしてコード内の長いリストを移動することもできますが、それは面倒であり、div属性を失う可能性もあります。)
テスト(jQuery 1.4.4、UI 1.8.10)で、元のdivではUIダイアログの親div.dialog("destroy")
とまったく同じように機能することがわかりました。.remove()
つまり、UIダイアログラッパーのdivのみが削除され、元のdivは元の状態のままになります。言い換えると、次のそれぞれが同じことを行います[注:.empty()は目立った効果はありませんでした]:
// Three different ways to destroy just the UI Dialog
// (and leave the original div).
$(".ui-dialog:has(#myDialog)").remove();
$("#myDialog").parents(".ui-dialog").remove();
$("#myDialog").dialog("destroy");
したがって、UIダイアログラッパーと元のdivの両方を破棄する最良の方法は次のようになります。
// Remove the old dialog and div to make way for a new one via Ajax.
$("#myDialog").dialog("destroy");
$("#myDialog").remove();
すべてのコピーを確実に破棄したい場合(呼び出しが多すぎて誤って作成しすぎた場合に備えて.dialog()
)、#idセレクターの前に次のようなものが必要です。
// Remove all old dialogs and divs to make way for a new one via Ajax.
$("div#myDialog").dialog("destroy");
$("div#myDialog").remove();
これを1行で行うこともできますが、意図が明確ではありません。
// Remove all old dialogs and divs to make way for a new one via Ajax.
// This technique is not recommended.
$("div#myDialog").parents(".ui-dialog").andSelf().remove();
これらすべてをFFでテストし、一部をIE8でテストしました。