it-swarm.com.ru

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

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

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

16
at.

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

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

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

31
Tauren

вы можете создать пустой 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, а затем вызовите dialog Open для этого div. ниже приведен пример загрузки динамической страницы одним нажатием кнопки.

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

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

14
leora

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

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