Ajax y jQuery 6/6 – Procesando formularios con validaciones

Siguiendo con el ejemplo visto en el artículo anterior sobre la serie de Ajax y jQuery, usemos el mismo ejemplo en el cual habíamos creado un script super sencillo y genérico para hacer que nuestro menú utilice llamadas asíncronas al servidor y agreguemos la funcionalidad de envío a nuestro formulario de contacto. Los archivos del ejemplo anterior los puedes descargar de aquí.

El objetivo de este artículo será agregar validaciones a nuestros formularios enviados por Ajax, ya que el envío en sí se encuentra explicado en el artículo sobre Hijax.

Continúa leyendo Ajax y jQuery 6/6 – Procesando formularios con validaciones

Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

Para continuar con la gente que quiere seguir viendo ejemplos sobre la serie de Ajax y jQuery, les tengo preparado un ejemplo más completo, muy sencillo, implementando peticiones asíncronas en los links de un menú. Por supuesto si hacemos esto vamos a usar la idea de Hijax para asegurarnos de que el sitio funcione con y sin Ajax.

Comencemos sin Ajax

El HTML que usaremos de ejemplo, como así también el CSS será muy básico para no desconcentrarnos del punto inicial del Ajax usado con jQuery. Básicamente se trata de un menú creado con una lista no ordenada (<ul><li>). En primer lugar les dejo los archivos del mini sitio sin absolutamente una línea de JavaScript, completamente funcional. Veamos el ejemplo de la primera página.

Continúa leyendo Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

Ajax y jQuery 2/6 – Implementando Hijax

Entendiendo el concepto de Hijax

Demos continuidad al artículo anterior sobre Ajax y jQuery agregando un concepto muy importante a la tecnología Ajax.

El concepto de Hijax es muy interesante aunque realmente no lo suelo escuchar mucho y realmente me costo un poco encontrar una manera de implementarlo, más por el hecho de encontrar una manera sencilla de hacerlo y sin dar tantas vueltas antes que por desarrollar código.

Básicamente se trata de no permitir que nuestro código Ajax elimine la posibilidad de que la funcionalidad normal de nuestra página continúe normalmente. Cuando empezamos a usar Ajax nos entra como una desesperación de usarlo en todo y considero que ese concepto no es el más acertado ya que hay que tener en cuenta a los clientes que no pueden interpretar JavaScript o cuando una página está aún cargando y los usuarios ya quieren dar click a los elementos.

Para ir entendiendo el concepto utilicemos un ejemplo que me parece bastante interesante: twitter.com. No se si lo habrán notado pero cuando entran al sitio y quieren ingresar el usuario y contraseña vemos que hay un botón “Iniciar Sesión”, el cual tiene dos comportamientos diferentes

  • Si el JavaScript necesario ya fue descargado veremos que abre un div para que introduzcamos los datos
  • En caso de que todavía no fue descargado y ya lo presionamos nos daremos cuenta que directamente nos redirecciona a una página diferente para ingresar los datos.

Continúa leyendo Ajax y jQuery 2/6 – Implementando Hijax