jQuery´s interesantes I

Hoy haciendo una aplicación de gestión, dónde se realizaba un crud, hice la típica función confirm de javascript y pensé, seguro que hay algo
que quede mucho mejor que enriquezca la experiencia de un usuario. Me puse a buscar y encontré un plugin de jQuery que proporcionaba
una forma configurable para mostrar los alerts, confirmaciones y demás que todos hemos usado en nuestras aplicaciones.

Gracias a este plugin podemos sustituir la funcionalidad proporcionada por las funciones:  alert(), confirm() y prompt(). De esta forma podemos personaliar
mediante css los mensajes y podiendo establecer un título personalizado para cada cuadro de diálogo. Dichos cuadros simulan un cuadro de diálogo modal, el cual
se posiciona en función del tamañó del navegador.

De momento tiene algunos fallos que son:

1) No se puede presionar intro o escape para aceptar o cancelar una acción.
2) El plugin de drag&drop no funciona en Opera
3) IE6 se conforma de forma diferente, ya que no soporta: postion : fixed

Ver la demo: página de la demo

Usar jQuery en OpenCms

A aquellos que os haya dado por probar jQuery en OpenCms, posiblemente os haya dado algún que otro problema. La cosa es que aunque las últimas versiones de OpenCms vienen ya con jQuery, para usarlo tenemos que hacerlo de una forma concreta, no se puede tratar como un javascript más.

Lo primero que tenemos que hacer es subir nuestras librerias a OpenCms a la carpeta /system/workplace/resources/jquery, dentro de esta carpeta tenemos pack y unpack, en la primera se pondrán las librerias para online y en la segunda para offline. Así mismo, tendremos que poner las css en la carpeta css junto con las imágenes.

Después para hacer las llamadas desde nuestra jsp tendremos que hacerlo de la siguiente manera:

<cms:jquery js=»nombre_fichero» css=»nombre_css» dynamic=’true’ />

Aunque estas sentencias se pueden poner en cualquier parte, lo suyo es ponerlas en la cabecera, es decir, en el head. De todas formas, si estamos poniendo el jquery en un element, no podremos ponerlo en la cabecera, para eso está el atributo dynamic, si lo ponemos a true, cargará el script en la cabecera dinamicamente.

Carga de página con AJAX II

En el post anterior exscribí sobre mis «investigaciones» para cargar páginas con AJAX, ya que, necesitaba cargar una página sin tener que recargarla, además de ver como podía meterle algún efecto curioso. El problema con el ejemplo anterior es que innerHTML a veces falla, ya que no es estándar. Por ello me puse a investigar como hacerlo a través del DOM, pero es una tarea algo pesada y me acorde de la existencias de librerías, como la que voy a usar, jQuery. Usando esta librería nos quitamos de un motón de trabajo, como veremos a continuación con el escaso número de líneas.

Primero lo que debemos de hacer es descargarnos la librería e incluirla en nuestra página y escribir el siguiente código:

 function loadContent(page)
 {
     $(‘#email’).fadeIn(‘slow’).load(page);
 }

Y la función hay que llamarla de la siguiente forma:

<a href=»#» onClick=»javascript:loadContent(‘<cms:link>search-mail.jsp</cms:link>’)»>

Cómo se puede observar resulta mucho más sencillo que en el caso anterior y esta forma no da problemas con ninguno de los navegadores más comunes.

Ahora bien, si queremos pasar parámetros a la nueva url, se hace de la siguiente forma:

Para pasarlos mediante GET: $(«#myDiv»).load(«myScript.php?var=x&var2=y&var3=z»)

Para pasarlos mediate POST: $(«#myDiv»).load(«myScript.php», {var:x, var2:y, var3:z})

Si lo que queremos es recoger los valores de un formulario y mandarlos como parámetros a la nueva pagina a la que redireccionamos, tenemos que usar la libreria o plugin para jQuery, forms. Una vez que la tengamos sólo necesitamos ejecutar las siguientes líneas para obtener el valor de los campos:

 var form = jQuery(‘#prueba’);
 q = form.serialize();

Con lo cual la función para cargar la página con parámetros queda así: 

function loadContent(page)
 {
   var form = jQuery(‘#prueba’);
   q = form.serialize();
   window.location.hash = q;
   $(‘#email’).fadeIn(‘slow’).load(page+»?»+q);
 }

Espero que haya sido útil.