come caricare una pagina con la finestra di dialogo dell'interfaccia utente di jquery

Question

è possibile caricare un'altra pagina con la finestra di dialogo dell'interfaccia utente di jquery?

Come Dialog + Ajax

Grazie

Answer 1

Se vuoi caricare il contenuto in una finestra di dialogo usando Ajax, puoi facilmente usare $ .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');

Controlla un esempio qui .

Answer 2

La progettazione della finestra di dialogo dell'interfaccia utente di JQuery è tale da richiedere il contenuto esistente su cui operare. In genere, negli esempi si tratta di un DIV tratto dal BODY esistente del DOM.

Ci sono casi in cui l'aggiunta di markup alle pagine esistenti solo per creare una finestra di dialogo - specialmente 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 markup a ognuna di esse.

Un modo alternativo ( ispirato da questo ) è qui:

La differenza è che crei il DIV a livello di codice (verrà automaticamente aggiunto al DOM) - e quando la finestra di dialogo si chiude lo distruggiamo completamente - e lo rimuoviamo dal DOM all'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');
}

---

Sostituisci dialog1.load (contentUrl) .dialog ('open'); con il seguente se non vuoi che la finestra di dialogo si apra (e potenzialmente sfarfallio) fino al caricamento del contenuto. Ciò consentirà inoltre di centrarlo correttamente senza ulteriore lavoro.

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

Answer 3

Preferisco aspettare di avere il contenuto per creare la finestra di dialogo. Mi sembra più semplice. Inoltre, il dimensionamento automatico 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(); }
            });
        }
    });

Answer 4

Certo, includi solo un iframe nell'HTML della tua finestra di dialogo.

Answer 5

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