C# - jqModal – Alternar popup en un mismo link

 

En el desarrollo de este ejemplo se pretenderá abordad dos situaciones que fueron encontradas en jqModal:

• Solucionar un problema que se produce en los cuadro de popup al renderizar por segunda vez una grilla que era generada de forma dinámica.
• Teniendo un link permitir alterar de cuadro de dialogo, pero siempre haciendo uso del mismo link

Prueba 1 – Problema trigger popup jqModal y grilla desde $.ajax

Esta prueba la encontraran en el ejemplo bajo la carpeta “jqModal1”.

La pagina por defecto es Principal.aspx, la cual posee simplemente un botón que carga una grilla que es obtenida mediante la funcionalidad $.ajax.

Cuando esta grilla es cargada por primera vez, al presionar sobre los botones que esta renderiza, se podrá observar el despliegue de popup.

Pero el problema se presenta si se vuelve a recargar la grilla, lo cual produciendo que el evento definido en el trigger del popup de jqModal deje de funcionar.

Se debe notar que al recargar la grilla esta pasa nuevamente por el método javascript registerPopUp(), pero esto no parece tener efecto.

Prueba 2 – Solución al problema del trigger de jqModal

En este segundo ejemplo se encontró la solución al problema planteado en la primera prueba.

Simplemente se reemplazo la forma en cómo el trigger es registrado, haciendo uso de método de jqModal: jqmAddTrigger

En esta ocasión por más que se realicen recargas de la grilla, los mensajes popup seguirán funcionando.

Según se observa parece ser que este método de jqModal fuerza la actualización del registro de los cuadro de popup.

Prueba 3 – Alternar popup en el mismo link

La tercera prueba va un poco as mas allá en el uso de popup de jqModal, en esta se pretende lograr que cada link pueda alternar  el popup que utilice, después de cada llamada.

El objetivo es tener un link (que en este caso será una imagen), en donde al presionarlo la primera vez muestre un cuadro de dialogo, pero al presionarlo por segunda vez muestre otro distinto, es mas al cerrar este debería volver al mostrar el original, o sea alternar de cuadro de dialogo entre cada pulsación del link.

En la implementación se realizar la apertura de los cuadros sin hacer uso de triggers, este es un detalle a remarcar, ya que la asignación de evento de apertura del cuadro se realizara mediante evento click del link.

Este ejemplo lo encontraran en la carpeta “jqModal3”, deberán especificar la pagina “Principal.aspx” como default en la ejecución.

Observaran como se registra los eventos mediante las líneas:

var itemselected = null;
var clickPopUp1 = function() {   
	itemselected = $(this);   
	$('#popup-info1').jqmShow();
}
var clickPopUp2 = function() {   
	itemselected = $(this);   
	$('#popup-info2').jqmShow();
}

Se debe puntualizar en la utilización de la variable “itemselected”, esta es muy importante ya que permite detectar cual es el objeto especifico que realiza la llamada.

Cuando se hace uso de triggers, o el método jqmAddTrigger es el propio jqModal el que guarda el ítem que lanzo el evento bajo la variable “t”, que es retornada en los eventos.

Cuando se hace uso de los callback de evento del propio jqModal se cuenta con varios objetos que ayudan a controlar el dialogo:

• w: (jQuery object) The dialog element
• c: (object) The config object (dialog's parameters)
• o: (jQuery object) The overlay
• t: (DOM object) The triggering element

Se podrían hacer algo como lo siguiente:

onHide: function(h) {      
	h.o.remove();     
	$(h.t).removeClass("linkpopup1");     
	$(h.t).toggleClass("linkpopup2");     
	$(h.t).unbind("click").click(clickPopUp2);     
	$(h.t).children("img").attr("src", "../appimages/ok.ico");   
	
	h.w.hide();
},

Es aquí en donde el “h.t” representa el objeto que lanzo el evento, pero en este caso por hacer uso de eventos por fuera de “jqm” (por no definir un “trigger”) es necesario mantener el objeto que lanzo el evento en una variable por separado, en este caso “itemselected”, ya que “h.t” tendrá el valor “undefined”.

Se debe analizar además como se hace la conversión de los cuadros en el link:

var closePopup1 = function(hash) {    
	hash.o.remove();  
	
	$(itemselected).removeClass("linkpopup1");    
	$(itemselected).toggleClass("linkpopup2");    
	$(itemselected).unbind("click").click(clickPopUp2);    
	$(itemselected).children("img").attr("src", "../appimages/ok.ico"); 
	
	hash.w.hide();
}

La línea  hash.o.remove(); que deber quitar el “overlay”. La línea hash.w.hide(); oculta el cuadro de dialogo.

El resto de las líneas trabajan sobre el ítem que lanzo el evento:

• cambiando la clase que determina el tipo de cuadro despliegan
• cambia el evento que debe lanzar, primeramente eliminando actual y luego registrando el nuevo.
• cambia la imagen asignada al ítem, debe recordarse que el objeto que lanza el evento es el link.

En este caso no se aplico pero se podría consulta cual es la clase de un ítem para determinar si cambiar de evento o no, haciendo uso de estas líneas:

if (!($(itemselected).is('.linkpopup1')))   
	$(itemselected).unbind("click").click(clickPopUp2);

Conclusion

Como se ha observado en las distintas pruebas se ha resuelto un problema que se presentaba en jqModal cuadro se recarga la información de forma dinámica.

Y implemento la alteración de de los cuadros de dialogo afectando solo a un link, permitiendo esto hacer nuestras aplicaciones mucho más dinámicas.

[Ejemplo]

[Documento]