Как настроить диалоговое окно jQueryUI динамически загружать контент

Мне нравятся диалоговые окна jQueryUI. Однако, как представляется, нет возможности динамически загружать встроенный контент. Думаю, для этого я должен использовать какой-то другой подход? Будет ли iframes загружать контент только тогда, когда они станут видимыми? Это правильный способ сделать это?

Я открыт для других механизмов диалогового окна, если они больше подходят для загрузки содержимого только при первом открытии.

Ответы

Ответ 1

Это не сложно сделать - я бы не стал возиться с iframes только для этого. Как насчет чего-то подобного?

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#divInDialog').load('test.html', function() {
       alert('Load was performed.');
     });
   }
});

В принципе, вы создаете свой диалог, и когда он открывается, файл html загружается с вашего сервера, заменяя содержимое вашего <div id="divInDialog"></div>, которое должно находиться внутри вашего диалога <div class="selector"/>.

Ответ 2

вы можете создать пустой div на своей странице

<div id="dialog-confirm"><div>

настройте диалог jquery ui с autoopen = false;

    $("#dialog-confirm").dialog({
        resizable: false,
        autoOpen: false,
        height:140,
        modal: true,
        buttons: {
          'Delete all items': function() {
            $(this).dialog('close');
          },
         Cancel: function() {
            $(this).dialog('close');
         }
       }
   });

тогда, когда вы хотите загрузить динамическую страницу, используйте вызов jQuery ajax для динамического размещения html в div, а затем вызовите диалог Открыть в этом div. ниже приведен пример загрузки динамической страницы при нажатии кнопки.

  $("#someButton").click(function()
  {
       $.post("Controller/GetPage", function(data){
            $('#dialog-confirm').html(data);
            $('#dialog-confirm').dialog('open');
       }, "html")};
  }

Кроме того, если для загрузки в ajax-вызове требуется некоторое время, вы можете использовать некоторое загрузочное изображение или jquery blockui для показать, что что-то загружается

Ответ 3

Я лично создаю "представление" для вашего диалогового окна, а затем расширяю его на созданное диалоговое окно. Для тестового примера я использовал следующий "вид":

var dialog = {
    title: 'Dialog WITHOUT Modal',
    modal: false,
    height: 300
};

Затем переходим к диалоговому окну:

$('#modal-btn-btns').click(function(){
    $('#dialog-modal-btns')
        .dialog($.extend(dialog, {
            modal: true,
            width: 500,
            title: "Dialog with modal AND buttons",
            buttons: {
                "Trigger ALERT": function(){alert("NICE [email protected][email protected]!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});