jquery UIダイアログでページをロードする方法
質問
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
所属していません StackOverflow