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

Helpers 2/2 – Select Box

Continuando este tema que lo dejé para continuar viendo otras cosas, me gustaría seguir hablando y creando helpers que ayuden a las personas que no están usando algún framework que ya disponga de algo parecido como Symfony.

Ya habíamos visto en el artículo de introducción llamado Helpers – Funciones genéricas la idea de crear un helper para crear controles input para formularios, ya sean de tipo text, button, submit, checkbox, radio, etc. Hoy me gustaría tratar un helper un poco más complejo para los selects (combo box) ya que si no lo tenemos hay que ir creando componentes de tipo <select> cada vez que obtenemos los datos de la base de datos y suele resultar un poco cansador.

Definamos la base

Tomemos como base crear una función a la cual llamaremos select_helper() que tomará por argumento los datos necesarios para la creación del combo. En un principio necesitaremos los argumentos más principales como el name del componente y las opciones (<option>) que se desplegarán. Este último será tratado como un array asociativo en donde tendremos como clave el value de nuestros options, y como el valor de la clave el texto a mostrar por cada opción. Haciéndolo bien básico podríamos tener el siguiente código

Continúa leyendo Helpers 2/2 – Select Box

Helpers 1/2 – Funciones genericas

Analizando un poco sobre los famosos helpers mencionados hoy en día en la mayoría de los Frameworks orientados a la web, me pareció interesante la idea de formular alguna explicación de como crearlos a fin de que sean lo más genéricos y reutilizables posible.

Para el ejemplo tomaremos el caso de un helper capaz de crear un input de formulario de la familia de los text, hidden, password, radio, checkbox, button, submit, reset. La idea sería crear una función que genere el HTML necesario para esto. Vayamos a un primer ejemplo y analicemoslo.

function input_helper($name, $type='text', $value='')
{
    $ret = '<input type="' . $type . '" name="' . $name . '" value="' . $value . '">';
    return $ret;
}
 
echo input_helper('nombre');
echo input_helper('id', 'hidden', 1);
echo input_helper('nombre', 'text', 'John Doe');
echo input_helper('sexo', 'checkbox', 'M');

Esto podría ser de ayuda para lo que necesitamos y es super sencillo. Obligatoriamente deberíamos pasar un nombre para el input y luego opcionalmente un tipo y un valor, tomando en cuenta que si no enviamos el tipo lo tomamos como inputtext

Supongamos que necesitaremos que el helper también sirva para agregar un class para trabajar con CSS. Este ya no sería un atributo obligatorio así que debería ser opcional y lo podremos como último parámetro de entrada.

Continúa leyendo Helpers 1/2 – Funciones genericas