Cómo hacer que el cuadro de diálogo jQueryUI cargue contenido dinámicamente

Me encantan los cuadros de diálogo de jQueryUI. Sin embargo, no parece haber una forma de cargar contenido de forma dinámica. ¿Supongo que tengo que usar algún otro enfoque para lograr esto? ¿Los iframes cargarán contenido solo cuando se hagan visibles? ¿Es esa la manera correcta de hacer esto?

Estoy abierto a otros mecanismos de cuadro de diálogo si son más adecuados para cargar el contenido solo cuando se abren por primera vez.

puedes crear un div vacío en tu página

 

configura un diálogo jquery ui con 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'); } } }); 

luego, cuando desee cargar una página dinámica, use una llamada jquery ajax para colocar dinámicamente el html en el div y luego llame al diálogo Abrir en ese div. aquí hay un ejemplo debajo de cargar una página dinámica con un clic de botón.

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

Además, si su página tarda un poco en cargar en la llamada ajax, es posible que desee utilizar alguna imagen de carga o el complemento jquery blockui para mostrar que algo se está cargando.

Yo personalmente crearía una “vista” para su cuadro de diálogo, luego extenderé sobre su cuadro de diálogo que se está generando. Para un caso de prueba utilicé la siguiente “vista”:

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

Luego se extiende a un cuadro de diálogo:

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