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

Question

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

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

Answer 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"/>.

Answer 2

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

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

Настройка диалогового графического интерфейса отображаются JQuery с AutoOpen = ложь;

$("#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, а затем вызвать диалог Открыть на этом дел. ниже приведен пример загрузки динамической страницы нажатием кнопки.

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

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

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