9

ダイアログを作成してから部分的なページレンダリングを実行しようとすると、JQueryダイアログでワークフローの問題が発生します。サンプルシナリオを試してみます。長い問題の説明について、事前にお詫びします。

ページが読み込まれ、JQueryダイアログに変換したいhtmlが含まれます。ダイアログは(を使用して.dialog())document.readyで作成されますが、autoOpenプロパティはfalseに設定されています。JQueryがダイアログを作成するとき(Firebugを使用してページを検査している場合)、ダイアログhtmlは実際には通常の場所から削除され、ドキュメントの最後にスタックし、ラッパークラスがいくつかあります。ユーザーは、を実行するだけのリンクをクリックしてダイアログを開きます$dialogDiv.dialog('open')

すべてが正常に機能するように。問題は、AJAXを使用して(ASP.NET MVC RenderPartialを使用して)ページの部分的なリロードを実行している場合があることです。更新しているページの一部には、ダイアログhtmlがすべて含まれているため、書き直されます。ただし、ダイアログ(すべてのJQueryラッパークラスなど)はすでにドキュメントの下部にあることに注意してください。そのhtmlはページ更新の一部ではなかったので、今は2セットのダイアログhtmlで立ち往生しています。ページに重複したIDがあり、これらのhtml要素でのjQueryの動作が予測できなくなるため、これはあらゆる種類の問題を引き起こします。3、4、5ページの部分的な更新を開始すると、さらに悪いことになります。これは、3、4、5セットのダイアログhtml(document.readyで作成された実際のダイアログは1つだけ)があるためです。

ある時点でダイアログなどを破棄する必要があるかもしれないと思っていますが、このアプローチではうまくいきませんでした。誰かアイデアはありますか?

どうもありがとう。

4

3 に答える 3

7

ドキュメントによると、ダイアログを破棄すると、ダイアログ機能が削除され、初期化前の状態に復元されますが、DOMからは削除されません。

コンテンツとダイアログを置き換えるので、古いものを削除するだけで済みます。

$.ajax({
  url: '/some/url/',
  success:function(data){
    $('.ui-dialog').empty().remove();
    //add the new html and make the dialogs
  }
});

あなたのコメントに応えて

私はあなたのコードを見たことがないので、ダイアログをどのように設定しているか正確にはわかりませんが、一般的な意味では、置き換えられるダイアログのみを変数に入力します。

//inside document.ready
  var myDialog=$('#myDialog').dialog(),
  myOtherDialog=$('#myOtherDialog').dialog(),
  permanentDialog=$('#permanentDialog').dialog(),
  destroyableDialogs=[myDialog, myOtherDialog];

//ajax callback
success: function(data){
  $.each(destroyableDialogs, function(i,n){
    n.empty().remove();
  });
}
于 2010-01-19T18:20:13.267 に答える
0

この問題と与えられた以前の答えに取り組んだ後、私は答えから欠落しているいくつかの重要な詳細を発見しました。ここで最も重要な点は.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でテストしました。

于 2011-09-22T20:44:22.660 に答える
0
Firs check the dialog is already exist then destroy that one and re-initilaze dialog on rendering
if ($("#dialogId").hasClass('ui-dialog-content')) {
      $('dialogId').dialog('destroy');
    }

    $("#dialogId").dialog({
      title: 'Warning',
      autoOpen: false,
      modal: true,
      width: 600,
      closeOnEscape: true,
      draggable: false,
      resizable: false,
    });
于 2015-02-16T07:35:01.233 に答える