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

Question

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

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

Answer 1

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

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

По сути, вы создаете свой диалог, и когда он открывается, HTML-файл загружается с вашего сервера, заменяя содержимое вашего <div id="divInDialog"></div>, которое должно быть внутри вашего диалога <div class="selector"/>.

Answer 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');
         }
       }
   });

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

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

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

Answer 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 CLICK!@!@!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});