jQueryのUIダイアログが

Question

私はそうのようなオープンなイベントを通じてjQueryのUIダイアログに外部のPHPページをロードしていますが機能：

$.ajax({ 
    url: "page.php", 
    success: function(data){ 
     $("#loadDiv").dialog({ 
      open: function(){ 
       $(this).html(data); 
      }, 
      autoOpen: false, 
      resizable: false, 
      minWidth:900, 
      minHeight:480, 
      modal:true, 
      title: "Add Page", 
      buttons: { 
       "Add": function() { 
        $.post("script.php", $("#addPageForm").serialize() , 
        function(data){ 
         if(data.search("<b>Error</b>") != -1 || data.search("<strong>Error</strong>") != -1) { 
          // Error occured 
         }else{ 
          // Success 
         } 
        }); 
       }, 
       "Cancel": function(){ 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    } 
}); 

（#loadDivは、ページに隠されているだけの空のdivです）

問題は、キャンセルボタンをクリックするとダイアログを閉じることになっていますが、そうではありません。私はFF用のFireBugを使用し、エラー "$（this）.dialogは関数ではありません... $（this）.dialog（" close "）;" $（ "＃loadDiv"）。dialog（ "open"）で再オープンしようとすると、どちらもうまく動作せず、2つは関連する問題だと思います。

問題は、ダイアログの内容がajaxを介して動的にロードされていることです。これは、ajax部分を取り出すと機能するためです。私はコンテンツをロードする方法でそれを動作させる方法を理解する必要があります。

ご意見をお寄せください。ありがとう！

Answer 1

私がダイアログに入れていたページにはjQueryソースが含まれていたので、その行を削除しても問題ありません。

Answer 2

ajax呼び出しの外にダイアログを宣言するには、autoOpenをfalseに設定します。成功コールバックの中で、空のdivにデータを追加して、それを表示するだけです。このような何か：

$(function() { 
    $("#loadDiv").dialog({    
      autoOpen: false, 
      resizable: false, 
      minWidth:900, 
      minHeight:480, 
      modal:true, 
      title: "Add Page", 
      buttons: { 
       "Add": function() { 
        $.post("script.php", $("#addPageForm").serialize() , 
        function(data){ 
         if(data.search("<b>Error</b>") != -1 || data.search("<strong>Error</strong>") != -1) { 
          // Error occured 
         }else{ 
          // Success 
         } 
        }); 
       }, 
       "Cancel": function(){ 
        $(this).dialog("close"); 
       } 
      } 
     }); 

}); 

$.ajax({ 
    url: "page.php", 
    success: function(data){ 
     $('#loadDiv').html(data); 
     $('#loadDiv').dialog('open'); 
    } 

}); 

EDITは変更とJSLintでコードを検証しました。

Answer 3

ドキュメントの読み込みが完了した後にダイアログの読み込みに問題がないことを確認し、clickイベントでライブを使用して、さらに$(this)がまだダイアログを参照しているかどうかを確認してください。

$(this)への参照を保持する変数を割り当てて、$(this)を参照しているときに正しいオブジェクト/要素を参照することがわかっているようにすることができます。