jquery - jqueryダイアログがajax更新で古いコンテンツを表示する理由を知っている人はいますか?

Question

一連のリンクがあり、リンクをクリックすると、詳細情報を含むダイアログが表示されます。この詳細は、jquery ajax リクエストから返されます。

以下のコードを使用して、ajax を介して部分的な結果を jquery ダイアログに表示しています。

jqueryコードは次のとおりです。

$(document).ready(function() {

 $('a.click').live('click', function() {

    var url = '/Tracker/Info?id=' + $(this).attr("id");

    var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 600,
        width: 450,
        overlay: {
            opacity: 0.7,
            background: "black"
        },
        draggable: true,
        resizeable: true,
        open: function() {
            //display correct dialog content
            $("#dialogDiv").load(url);
        }
    };

    $("#dialogDiv").dialog(dialogOpts); //end dialog
    $("#dialogDiv").dialog("open");

});

});

これが私のコントローラーアクションコードです:

    public ActionResult Info(int id)
    {
        return PartialView("LabelPartialView", _Repository.GetItem(id));            
    }

問題は次のとおりです。

これを初めてクリックすると（ID = 1234を送信したとしましょう）、正常に動作します。
別のアイテムをクリックすると (送信 ID = 4567 としましょう)、1234 からのコンテンツが表示されます。
この 2 番目のアイテム (再びその 4567) をクリックすると、4567 のコンテンツが表示されます。

初めて更新されない理由を知っている人はいますか? これはタイミングの問題ですか？

Answer 1

各モーダルを表示した後、 #dialogDiv を完全に破棄していることを確認する必要があります。

表示するダイアログごとに同じ div を再利用すると、同じ問題が発生しました。

頭のてっぺんから忘れてしまいましたが、dialogOpts を定義するときに次のようなものを追加します。

close: function() { $("#dialogDiv").dialog("destroy"); },

jQuery API リファレンスは次のとおりです: http://docs.jquery.com/UI/Dialog

これがいくつかの洞察を提供することを願っています!

• ジェシー

Answer 2

ダイアログを複数回作成する方法に関係していると思います。ライブの外でダイアログを作成してみてください。次に、必要に応じてダイアログの内容を変更し、ダイアログを再度開きます。この状況で私が通常行うことは、読み込みメッセージを入力し、ダイアログを開いてから ajax 呼び出しを開始して内容を置き換えることです。このようなもの。

$(function () {

  $("#dialogDiv").dialog({
      modal: true,      
      bgiframe: true,      
      autoOpen: false,      
      height: 600,      
      width: 450,      
      overlay: {      
        opacity: 0.7,      
        background: "black"      
      },      
      draggable: true,      
      resizeable: true
  });

  $('a.click').live('click', function() {      
    var url = '/Tracker/Info?id=' + $(this).attr("id");      
    $("#dialogDiv")
      .html('Loading')
      .dialog("open")
      .load(url);      
  });

});

Answer 3

ここで .one() メソッドを使用して解決策を見つけました