cómo cargar una página con el diálogo jquery ui

Question

¿es posible cargar otra página con el diálogo jquery ui?

Como Diálogo + Ajax

Gracias

Answer 1

Si desea cargar contenido en un cuadro de diálogo con Ajax, puede utilizar fácilmente $ .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'); 

Comprobar un ejemplo here.

Answer 2

Claro, basta con incluir un iframe en HTML de su diálogo.

Answer 3

Si usted necesita específicamente o desea un iFrame en lugar del contenido inyectado en el DOM, tengo una extensión para que aquí: http://plugins.jquery.com/project/jquery-framedialog

Answer 4

El diseño del cuadro de diálogo jQuery UI es tal que necesita el contenido existente para operar sobre . Normalmente, en los ejemplos, este es un DIV tomado del BODY existente del DOM.

Existen casos en los que agregar marcas a las páginas existentes solo para crear un cuadro de diálogo, especialmente si el contenido es cargado por AJAX, causa problemas. Por ejemplo, puede tener una biblioteca JavaScript a la que se pueda llamar desde varias páginas y no desee agregar marcas a cada una de ellas.

Una forma alternativa (inspired by this) está aquí:

es que se crea el DIV programación (se añadirá automáticamente a la DOM) La diferencia - y cuando se cierra el cuadro de diálogo que destruye por completo - y sacarlo de el DOM en el evento 'cerrar'.

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'); 
} 

---

Reemplazar dialog1.load(contentUrl).dialog('open'); con lo siguiente si no desea que el cuadro de diálogo para abrir (y potencialmente parpadeo) hasta que se cargue el contenido. Esto también permitirá que se centre correctamente sin trabajo adicional.

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

Answer 5

Prefiero esperar hasta que tenga el contenido para crear el cuadro de diálogo. Me parece más directo. Además, el auto-tamaño no parece funcionar de otra manera:

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