Как загрузить страницу с помощью jquery ui dialog

Ответ 1

Если вы хотите загрузить контент в диалоговое окно с помощью 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');

Посмотрите пример здесь.

Ответ 2

Конструкция диалогового окна пользовательского интерфейса JQuery такова, что ему нужен существующий контент. Обычно в примерах это DIV, взятый из существующего BODY DOM.

Бывают случаи, когда добавление разметки к существующим страницам только для создания диалога - особенно если содержимое загружается AJAX - вызывает проблемы. Например, у вас может быть библиотека JavaScript, которая может быть вызвана с нескольких страниц и не хочет добавлять разметку для каждого из них.

Альтернативный способ (вдохновленный этим) находится здесь:

Разница заключается в том, что вы создаете DIV программно (автоматически добавляется в DOM) - и когда диалог закрывается, мы полностью уничтожаем его - и удаляем его из 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');
});

Ответ 3

Я предпочитаю подождать, пока у меня не будет содержимого для создания диалога. Мне кажется более понятным. Кроме того, автоматическое определение размера не работает иначе:

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

Ответ 4

Конечно, просто включите iframe в свой диалог HTML.

Ответ 5

Если вам нужно или нужно iFrame вместо вставляемого содержимого в dom, у меня есть расширение для этого здесь: http://plugins.jquery.com/project/jquery-framedialog