как загрузить страницу с помощью диалогового окна 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 таков, что для работы требуется существующий контент.Обычно в примерах это DIV взято из существующего BODY ДОМ.

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top