cómo cargar una página con jquery ui dialog

Question

¿Es posible cargar otra página con jquery ui dialog?

Me gusta Dialog + Ajax

Gracias

Answer 1

Si desea cargar contenido en un cuadro de diálogo usando Ajax, puede usar 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');

Consulte un ejemplo aquí .

Answer 2

El diseño del diálogo de JQuery UI es tal que necesita contenido existente para operar. Normalmente, en los ejemplos, se trata de un DIV tomado del BODY existente del DOM.

Hay casos, sin embargo, donde agregar marcas a las páginas existentes solo para crear un diálogo, especialmente si el contenido está cargado por AJAX, causa problemas. Por ejemplo, es posible que tenga una biblioteca de JavaScript a la que se puede acceder desde varias páginas y que no desee agregar un marcado a cada una de ellas.

Una forma alternativa ( inspirado en esto ) está aquí:

La diferencia es que crea el DIV mediante programación (se agregará automáticamente al DOM), y cuando se cierra el cuadro de diálogo, lo destruimos por completo y lo eliminamos del 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');
}

---

Reemplace dialog1.load (contentUrl) .dialog ('abrir'); con lo siguiente si no desea que el cuadro de diálogo se abra (y posiblemente parpadee) 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 3

Prefiero esperar hasta que tenga el contenido para crear el diálogo. Me parece más sencillo. Además, el tamaño automático 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(); }
            });
        }
    });

Answer 4

Claro, solo incluye un iframe en el HTML de tu cuadro de diálogo.

Answer 5

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