jquery UIダイアログでページをロードする方法

StackOverflow https://stackoverflow.com/questions/1608249

  •  05-07-2019
  •  | 
  •  

質問

jquery uiダイアログで別のページをロードできますか？

「いいね！」ダイアログ+ Ajax

ありがとう

役に立ちましたか？

解決

Ajaxを使用してダイアログにコンテンツをロードする場合、$。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');

例を確認こちら。

他のヒント

JQuery UIダイアログの設計では、操作する既存のコンテンツが必要です。通常、例ではこれはDOMの既存の BODY から取得した DIV です。

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

別の方法（これに触発された）はこちら：

違いは、プログラムでDIVを作成することです（自動的にDOMに追加されます）。ダイアログが閉じると、ダイアログを完全に破棄し、「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');
});

ダイアログを作成するコンテンツが揃うまで待ちます。それは私にはもっと簡単に思えます。また、そうでない場合、自動サイズ設定は機能しないようです：

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

もちろん、ダイアログのHTMLにiframeを含めるだけです。

domにコンテンツを挿入する代わりにiFrameが特に必要または必要な場合は、 http://plugins.jquery.com/project/jquery-framedialog

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top