Cómo tener el cuadro de diálogo jQueryUI cargar contenido dinámicamente

Question

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.

Answer 1

Esto no es difícil de hacer - - No empezaría a jugar con iframes solo por esto. ¿Qué tal algo como esto?

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

Básicamente, se crea el diálogo, y cuando se abre, un archivo HTML se carga desde el servidor, reemplazando el contenido de su <div id="divInDialog"></div>, que debe estar dentro de su diálogo <div class="selector"/>.

Answer 2

puede crear un div vacío en su página

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

configuración de un cuadro de diálogo de interfaz de usuario jQuery 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'); 
     } 
     } 
    }); 

a continuación, cuando se desea cargar una página dinámica, utilice una llamada ajax jquery para poner dinámicamente el HTML en el div y luego llamar de 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")}; 
    } 

También, si la página tarda un poco en cargar en la llamada ajax, es posible que desee utilizar alguna imagen de carga o jquery blockui plugin para mostrar que algo se está cargando

Answer 3

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

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

A continuación, se extiende sobre 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!'); 
});