Come la finestra di dialogo di jQueryUI carica dinamicamente il contenuto

Question

Amo le finestre di dialogo di jQueryUI. Tuttavia, non sembra esserci un modo per caricare dinamicamente il contenuto integrato. Immagino di dover usare qualche altro approccio per raggiungere questo obiettivo? Gli iframe caricheranno il contenuto solo quando saranno resi visibili? È questo il modo giusto per farlo?

Sono aperto ad altri meccanismi di dialogo se sono più adatti per caricare il contenuto solo quando sono aperti per la prima volta.

Answer 1

Questo non è difficile da fare - - Non inizierei a scherzare con iframe solo per questo. Che ne dici di questo?

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

In sostanza, si crea il dialogo, e quando viene aperto, un file HTML viene caricato dal server, sostituendo il contenuto del tuo <div id="divInDialog"></div>, che dovrebbero essere all'interno del vostro dialogo <div class="selector"/>.

Answer 2

è possibile creare un div vuoto sulla tua pagina

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

impostare un dialogo ui 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'); 
     } 
     } 
    }); 

poi quando si desidera caricare una pagina dinamica, utilizzare una chiamata jquery ajax per mettere in modo dinamico l'html all'interno di div e quindi chiamare finestra di dialogo Apri su quel div. ecco un esempio sotto il caricamento di una pagina dinamica su un clic del pulsante.

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

anche, se si vuole un po 'la pagina per caricare nella chiamata ajax, si potrebbe desiderare di utilizzare alcuni loading image o jquery blockui plugin per dimostrare che qualcosa sta caricando

Answer 3

Vorrei creare personalmente una "vista" per la finestra di dialogo, quindi estendere sulla finestra di dialogo che viene generata. Per un banco di prova ho usato il seguente "vista":

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

Poi si estende su una finestra di dialogo:

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