jquery UIダイアログでページを読み込む方法

Question

jquery UIダイアログを使用して別のページを読み込むことは可能ですか？

ようなダイアログ+ Ajaxの

おかげ

Answer 1

あなたがアヤックスを使用してダイアログにコンテンツをロードしたい場合、あなたは簡単に$ .LOAD使用することができます。

// initialize dialog 
var dialog1 = $("#dialog").dialog({ autoOpen: false, 
    height: 600, 
    width: 350 
}); 

// load content and open dialog 
dialog1.load('path/to/otherPage').dialog('open'); 

確認例here。

Answer 2

確かに、ちょうどあなたのダイアログのHTML内のiframeが含まれます。

Answer 3

あなたが特に必要とするか、または代わりに、DOMに注入されたコンテンツのiFrameをしたい場合は、私がここにいるの拡張子を持っている：http://plugins.jquery.com/project/jquery-framedialog

Answer 4

jQueryのUIのダイアログのデザインは、それが時に動作するように既存のコンテンツを必要とするようなものです。典型的には、これは、DOMの既存のBODYから取られたDIVである。

ダイアログを作成するためだけに既存のページにマークアップを追加する場合（特にAJAXによってコンテンツが読み込まれる場合）に問題が発生することがあります。たとえば、JavaScriptライブラリを複数のページから呼び出すことができ、それらのそれぞれにマークアップを追加したくない場合があります。

別の方法（inspired by this）はここにある：

あなたは（自動的にDOMに追加されます）プログラムでDIVを作成するということで違い - とダイアログが閉じたときに我々はそれを完全に破壊する - とから、それを削除します「close」イベントのDOM

function JQDialog(title, contentUrl, params) { 
    var dialog1 = $("<div>").dialog(
    { 
    autoOpen: false, 
    modal: true, 
    title: title, 
    close: function (e, ui) { $(this).remove(); }, 
    buttons: { "Ok": function() { $(this).dialog("close"); } } 
    }); 
    dialog1.load(contentUrl).dialog('open'); 
} 

---

コンテンツがロードされるまでは、ダイアログが開く（および潜在的に点滅）したくない場合は、以下でdialog1.load(contentUrl).dialog('open');を交換してください。これにより、追加の作業をせずに適切に中央揃えすることもできます。

dialog1.load(contentUrl, function() { 
    $(this).dialog('open'); 
}); 

Answer 5

私は、ダイアログを作成するコンテンツがあるまで待つことを好みます。それは私にとってもっと簡単なようです。また、自動サイズ調整はそれ以外の方法では動作しないようです。

$.ajax({ 
     'url': contentUrl, 
     'success': function success(data, textStatus, xhr) { 
      $("<div>" + data + "</div>").dialog({ 
       "width": "auto", 
       "height": "auto", 
       "close": function (e, ui) { $(this).remove(); } 
      }); 
     } 
    });