come caricare una pagina con la finestra di dialogo ui jquery

Question

è possibile caricare un'altra pagina con la finestra di dialogo ui jquery?

Come Dialog + Ajax

Grazie

Answer 1

Se si desidera caricare il contenuto in una finestra di dialogo con Ajax, si può facilmente utilizzare $ .load:

// initialize dialog 
var dialog1 = $("#dialog").dialog({ autoOpen: false, 
    height: 600, 
    width: 350 
}); 

// load content and open dialog 
dialog1.load('path/to/otherPage').dialog('open'); 

controllare un esempio here.

Answer 2

Certo, basta includere un iframe nel codice HTML del vostro dialogo.

Answer 3

Se specificamente bisogno o desideri un iFrame invece di contenuti iniettato nel Dom, ho un'estensione per questo qui: http://plugins.jquery.com/project/jquery-framedialog

Answer 4

Il design della finestra di JQuery UI è tale che ha bisogno di contenuti esistenti di operare sia . Tipicamente in esempi questo è uno DIV preso dal BODY esistente del DOM.

In alcuni casi, l'aggiunta di markup alle pagine esistenti solo per creare una finestra di dialogo, in particolare se il contenuto è caricato da AJAX, causa problemi. Ad esempio, potresti avere una libreria JavaScript che può essere chiamata da un numero di pagine e non vuoi aggiungere il markup a ciascuna di esse.

Un modo alternativo (inspired by this) è qui:

La differenza è che si crea il DIV di programmazione (verrà aggiunto automaticamente al DOM) - e quando la finestra di dialogo si chiude lo distruggiamo completamente - e rimuoverlo dalla il DOM sull'evento 'close'.

function JQDialog(title, contentUrl, params) { 
    var dialog1 = $("<div>").dialog(
    { 
    autoOpen: false, 
    modal: true, 
    title: title, 
    close: function (e, ui) { $(this).remove(); }, 
    buttons: { "Ok": function() { $(this).dialog("close"); } } 
    }); 
    dialog1.load(contentUrl).dialog('open'); 
} 

---

Sostituire dialog1.load(contentUrl).dialog('open'); con il seguente se non si desidera che la finestra di dialogo per aprire (e potenzialmente flicker) fino a quando il contenuto viene caricato. Ciò consentirà anche di essere centrato correttamente senza ulteriore lavoro.

dialog1.load(contentUrl, function() { 
    $(this).dialog('open'); 
}); 

Answer 5

preferisco aspettare finché non avrò il contenuto per creare la finestra. Sembra più semplice per me. Inoltre, l'auto-ridimensionamento non sembra funzionare diversamente:

$.ajax({ 
     'url': contentUrl, 
     'success': function success(data, textStatus, xhr) { 
      $("<div>" + data + "</div>").dialog({ 
       "width": "auto", 
       "height": "auto", 
       "close": function (e, ui) { $(this).remove(); } 
      }); 
     } 
    });