2 de febrero de 2012

jQueryUI. Cargar pagina en Dialogo Modal con jQuery UI

Este pequeño post es para mostrar una solución simple de como mostrar el contenido de una pagina (o parte de ella) en un dialogo modal.

Imaginemos que tenemos una pagina Page1 y otra Page2, y que estando en Page1 queremos ver el contenido de Page2, pero sin salir de Page1. Una posible solución es abrir una nueva ventana y asunto resuelto, pero nuestro objetivo es abrir dicho contenido como un dialogo modal propio de Page1, además, puede que no necesites mostrar la Page2 completa, sino solo una parte de ella.

En nuestro ejemplo usaremos la misma pagina (por simplicidad), o sea, desde Page1, abriremos un dialogo con parte del contenido de Page1, veamos una imagen para hacernos una idea mejor:

image

Como vemos en la imagen, desde nuestro primer formulario (El que aparece en el fondo), hemos abierto un dialogo con el contenido de una URL (en nuestro caso coincide que es la misma pagina) pero solo hemos cargado una parte de la pagina, hemos dejado fuera el ToolBar (Barra de botones).

Para lograrlo usaremos las librerías JavaScript:

  • jQuery
  • jQuery UI

Código de Ejemplo jQuery UI Dialog – Cargar Pagina:

Función JavaScript que carga la página en el dialogo:

function fnLoadPageInDialog(url, contID, titleNewDialog, widthNewDialog, heightNewDialog) {  

       var urlWithCont = url;

       if (contID != '')

             urlWithCont = urlWithCont + ' #' + contID;

                   

       var $dialog = $('<div></div>')

             .load(urlWithCont)

             .dialog({

                    autoOpen: false,

                    title: titleNewDialog,

                    width: widthNewDialog,

                    height: heightNewDialog

             });

 

       $dialog.dialog('open');

}

Ejemplo de llamada a la función JavaScript:

fnLoadPageInDialog('FichaDoc.aspx?op=view&Id=5665', 'divDocInfo', 'Documento Información', 820, 350);

 

 Y así de simple logramos el objetivo.