jQuery Validate

jQuery Validate

Presentacion:

En mas de una ocacion por no decir siempre, se presenta la necesidad de validar los formularios, para esta validacion existe un Pluguin para jquery el cual se llama Validate.

Opciones del pluguin:

rules: Define las reglas de validacion, las opciones que he usado son required, minlength, email.

messages: Se configura el contenido de los mesajes cuando las validaciones no dan un resultado positivo.

submitHandler: Define las acciones que se usan en caso de que todas las validaciones sean correctas

invalidHandler: Define las acciones que se usan en caso de que las validaciones sean incorrectas.

Inclucion de archivos necesarios:

Para inciar el uso es necesario comprender sus origenes, validate es un pluguin de Jquery, razon por la cual debe hacer llamado a jquery, una vez realizado la inclusion del framework jQuery, debe realizar  el llamado del validate asi:

<script type=”text/JavaScript” src=”jquery.js”></script> <script type=”text/JavaScript” src=”query.validate-v1.5.5.js”></script>

Definicion de reglas y acciones:

Despues de incluir las respectivas librerias es necesario definir las acciones que tendra jQuery como se muestran a contnuacion:

<script type=”text/javascript”> $(document).ready(function() { $(“#parametrosEnvio”).validate({ rules: { emailDestino: { required: true, email: true, minlength: 10 } }, messages: { emailDestino: { required: “Ingrese una direccion de email valida”, email: “La direccion de email ingresada no tiene un formato valido”, minlength: “El email debe tener minimo 10 caracteres” }, }, submitHandler: function(form){ $(“#destino”).show(); $(“#destino”).html(“<img src=’img/ajax-loader.gif’ /></img><strong>Cargando resumen de membresia…</strong>”); $.ajax({ type: “POST”, url:”include/welcome_media_kit.php”, contentType: “application/x-www-form-urlencoded”, processData: true, data: “nombre=”+escape($(‘#nombreDestino’).val())+”&email=”+escape($(‘#emailDestino’).val())+”&idioma=”+escape($(‘#idioma’).val()), success: function(html){ $(“#enviarEmail”).show(); $(“#destino”).html(“”); $(“#destino”).append(html); } }); }, invalidHandler: function(form) { $(“#enviarEmail”).hide(); $(“#destino”).html(“”); $(“#destino”).hide(); }, }); }); </script>

Metodos de jQuery

Metodos de jQuery

Presentacion:

La informacion que encuentra ene sta pagina son metodos que aplcian a jQuery y una corta descripciond ecada uno de mi manera de interpretarlos:

Eventos:

1. $(“a”).click(function(event){ : Grupo de codigo que se ejecuta el evento click de un elemento “a”.

2. $(“a”).mouseover(function(event){ : Grupo de codigo que se ejecuta cuando se encuentra el evento mouseover (Pasar ekl maouse por encima) de un elemento “a”.

3. $(“a”).mouseout(function(event){ : Grupo de codigo que se ejecuta cuando se encuentra el evento mouseout(Sacar el maouse por encima) de un elemento “a”.

Atributos:

1. $(“#capa”).addClass(“clasecss”); : Aplicar hojas de estilo clasecss al elemento capa.

2. $(“#capa”).removeClass(“clasecss”); :

3. $(“#capa”).css(“display”, “none”); : Oculta la capa.

4. $(“#capa”).css(“display”, “block”); : Muestra la capa.

5. $(“#capa”).attr(“checked”) : Verifica el valor del atributo checked.

Uso de jQuery

Uso de jQuery

Presentacion:

jQuery es un framework javascript muy proderoso y muy usado, por tal razon en esta seccion empezare con mostar cuestiones basicas de este.

Qué es jQuery

jQuery es un framework Javascript, entiendase como framework unas librerías de código que contienen procesos o rutinas ya listos para usar.

Para lograr la programacion perfecta simplemente debemos conocer las librerías del framework y programar utilizando las clases, sus propiedades y métodos para la consecución de nuestros objetivos. Como ventaja adicional el framework jQuery tiene licencia para uso en cualquier tipo de plataforma y es gratuito. Para usarlo simplemente se tiene que incluir en las páginas un script Javascript que contiene el código de jQuery.

jQuery es un producto con una amplia aceptación por parte de los desarrolladores. Además, es un producto serio, estable y bien documentado. Adicional a lo anterior se encuentran plugins o componentes, lo que hace fácil encontrar soluciones ya creadas en jQuery para implementar asuntos como interfaces de usuario, galerías, votaciones, efectos diversos, etc, etc… Una competencia de jQuery es Mootools.

Lo más complicado de jQuery es aprender a usarlo. Requiere que el desarrollador tenga habilidades avanzadas de programación y conocimiento de la programación orientada a objetos.

Uso de jQuery

Para hacer uso de jquery es necesario tener:

1. El framework de jQuery: Este framework lo puede descargar desde la pagin a http://jquery.com
hay diferentes versiones escoja la que usted prefiera. En mi caso descargue la “DEVELOPMENT” en su version 1.5.1.

2. Crear una pagina HTML: LA creacion de esta pagina debe ser con todas las etiquetas, tenga en cuenta que debe incluir el framework jQuery.

<html> <head> <script src=”jquery-1.5.1.js” type=”text/javascript”></script> <script> $(document).ready(function(){ $(“a”).click(function(evento){ alert(“Has pulsado el enlace…nAhora serás enviado a DesarrolloWeb.com”); }); }); </script> </head> <body> <a href=”http://www.desarrolloweb.com/”>DesarrolloWeb.com</a> </body> </html>

Ejecutar código cuando la página ha sido cargada

El siguiente procedimiento es detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM. Cuando se hacen acciones complejas con Javascript, hay que tener seguro que la página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos, cambiar sus propiedades, etc. Si no se da este tiempo de espera es posible que se generen errores de Javascript en la ejecución.

jQuery incluye una manera de identificar en que momento se puede ejecutara cciones sobre la pagina, asi existan elementos que no hayan sido cargados del todo. Esto se hace con la siguiente sentencia.

window.onload = function () { alert(“cargado…”); }

Explicacion del script codigo anterior

1. $(document) : Se obtiene una referencia al documento (la página web) que se está cargando.

2. $(document).ready : Con el método ready() se define un evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la página.

3. $(“a”) : Se obtiene una referencia al elemento “a” .

4. $(“a”).click(function(evento) :  Con el metodo click se define un evento  a los elementos de “a”

Funciones que se ejecutarán una detrás de otra

En ocaciones es necesario esperar que una funcion inicie despues de que otra termine y no de manera simultanea, suponga una funcion que se demora dos segundos en ejecutarse y luego sigue otra, si lo hace de la manera tipica la segunda funcion iniciaria ntes de que pasara los dos segundos que se tomna la primera funcion en finalizar, esta accion inmediata da efectos inesperados, esta seccion pretende mostarr la manera correcta de ejecutar una funcion despues que se termina la primera, este procedimiento tambien se conoce como callback.

Teoricamente la manera de realizar este procedimiento sigue la logica

miFuncion (“parametros de la funcion”, function(){ funcionCallback(); });

De manera mas real, el siguiente ejemplo lo describe.

$(“#micapa”).fadeOut(1000, function(){ $(“#micapa”).css({‘top’: 300, ‘left’:200}); $(“#micapa”).fadeIn(1000); });

El codigo anterior ejecuta primero la funcion fadeOut, espera 1 segundo 1000 milisegundos y despues cambia de posicion a micapa y despues ejecuta fadeIn.

Uso de Ajax con jQuery

El uso de ajax con el framwork de jQuery es muy sencillo, solo se necesita de una linea para realizar el llamado ajax.

$(document).ready(function(){ $(“#enlaceajax”).click(function(evento){ evento.preventDefault(); $(“#destino”).load(“contenido-ajax.html”); }); })

La linea encargada de realizar el llamado ajax es

$(“#destino”).load(“contenido-ajax.html”);

Comparar dos fechas con javaScript

Comparar dos fechas con javaScript

Presentacion:

Para comparar si una fecha es Mayor que otra con el lenguaje de java sscript puede usar la siguiente funcion.

Funcion:

function compare_dates(fecha, fecha2) { var xMonth=fecha.substring(3, 5); var xDay=fecha.substring(0, 2); var xYear=fecha.substring(6,10); var yMonth=fecha2.substring(3, 5); var yDay=fecha2.substring(0, 2); var yYear=fecha2.substring(6,10); if (xYear> yYear) { return(true) } else { if (xYear == yYear) { if (xMonth> yMonth) { return(true) } else { if (xMonth == yMonth) { if (xDay> yDay) return(true); else return(false); } else return(false); } } else return(false); } }

Forma de uso

if (compare_dates(fecha1, fecha2)){ alert(“fecha1 es mayor a fecha2″); }else{ alert(“fecha1 es menor a fecha2″); }

Envio de todo el contenido de un formulario por xAjax.

Envio de todo el contenido de un formulario por xAjax.

xajax_guardaInformacionDeEmpresa(xajax.getFormValues(‘guardaInfoID’))

Envio de todo el contenido de un formulario por xAjax.

Envio de todo el contenido de un formulario por xAjax.

Menus retractil

Menus retractil

Si se presenta la ocasion de necesitar un menu retractil yo recomiendo la siguiente pagina: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

Problemas con la codificacion XAjax

Problemas con la codificacion XAjax

Descripcion

Si se esta usanado xAjax en paginas web es posible que en algunas ocaciones se encuentran caracteres extraños en las bases de datos caracteres como “Ậ” en ves de aparecer letras con acentos como “á”, esta situacion no se debe tratar de solucionar con funciones que tranmsformen carateres, este problema es debido a la codificacion que tiene su pagina WEB y la codificacion que maneja xAjax.

Explicacion

El constructor del objeto xajaxResponse, el cual debeser usado en la funcion que implementa el procedimiento con Xajax por defecto manej codificacion utf-8 y en su pagina WEB por efectos de presentacion uted usa iso-8859-1 o latin1.

Como puede notar el tipo de codificacion cambia ya que son diferentes las codificaciones que se manejan en xAjax y la pagian WEB.

Pasos para mostrar caracteres espueciales desde una base de datos a una pagina HTML que usa Xajax

Garantizar que los datos proveniente de la base de datos se muestre de forma correcta.

1 Los datos que estan en la base de datos tienen caracteres especiales como “á, é, í,ó,ú”.

2 Al ser mostrados estos caracteres en la pagina HTML se debe realizar un tratamiento especial para garantizar la correcta visualizacion al realizarla transformacion correcta entre los carcateres especiales y su referencia deentidad, es decir que transforme elñ caracter “á” por “á” garantizando la correcta visualizacion de los datos.

Logica de la manipulacion de la informacion

1. En la carga inicial de la pagina esta ya debe traer los valores que estan inicialmente almacenados en una base de datos, el procedimiento seria:

1.1 Consultar a la base de datos.

1.2 Obtener los datos del campo que usted requiere.

1.3 Imprima el valor deseado con ayuda de la la funcion htlmentites(

) para garanteizar la correcta visualizacion de la base de datos.

2. Al realizar ediciones sobre los valores actualmente almacenados en la base de datos se hace uso de xAjax de la siguiente forma

2.1 En el forulario y con ayuda del metodo onChange de cada uno de los text que usted pernita hacer ediciones y en lenguaje de javascript llame a la funcion xajax que le realiza la actualizacion, recuerde que en este punto la codificacion que esta usando es la de la pagina WEB, es decir iso-8859-1.

2.2 LA funcion xAjax recibe los parametros y se procede a convertirlos en la codificicacion que xAjax  maneja utf-8, con la funcion utf8_decode();

2.3 Realize todos los procedimientos que su funcion implementa.

2.4 Antes de retornar el valor tiene que convertir la odificacion actual que usa xAjax de utf-8 a la que usa quien toma la respuesta HTML con codificacio iso-8859-1 con ayuda d ela funcion utf8_encode();

2.5 Retorne el valor en el id neceseario.

Pasos para almacenar caracteres especiales en bases de datos

Este error se presenta y es causa por la codificacion en el caso que su pagina web:

1. Use codificacion charset=”iso-8859-1″

2. El objeto de xAjax use codificacion “utf-8″

3. Dentro de sus formulario utilize caracteres fuera de la codificacion como “ñ” o caracteres acentuados tales como “á, é, í,ó,ú”.

Funciones php neceseraias

1. htmlentites () : Esta funcion transforma los caracteres que se indica en el parametro de entreda y los convierte en su equivalente HTML, es decir, si un parametro de entrada es el caracter “ñ”, la funcion devolvera” &ntilde”.

2. utf8_encode(): Codifica a utf-8.

2. utf8_decode():  Decodifica de utf-8.

Xajax con respuestas en etiquetas text

Xajax con respuestas en etiquetas text

Presentacion

En alñgunas aplicaciones en las que se usa Xajax es necesario retonar un valor en un campo deltipo text si es que la funcion de Xajax realiza alguna modificacion en lo ingresado al cuadro de texto, por ejemplo un texto que se ingresa en minuscula, se envia a la funcion de xajax, esta funcion transforma los caracteres a mayusculas,los almacena enlabase de datos y envia la frase midificada a el campo texto de nuevo.

Procedimiento

1. El valor que se le envia a la funcion de xajax en el evento onChange del texto se envia de la forma (document.nombreDelFormulari.nombreDelText.value)

<form name=”edicion”>

<input type=”text” name=”nombreUsuario” onChange=”xajax_nombreDeLaFuncion(document.edicion.nombreUsuario.value);” id =”nombreID”>

</form>

2.  Manejo de la respuesta en funcion

2.1 El manejo de la respuesta se da de esta forma

$respuesta->assign(“nombreDelID “,”value”,”repuesta”);

Xajax con respuestas en etiquetas

Xajax con respuestas en etiquetas

Presentacion

La forma mas facil de conocer el resultado de una transaccion con Xajax es necesario crear una respuesta con xajax.

Procedimiento

1.Cambiosen la funcion que se ejecuta con xajax

1.1 crear una respuesta Xajax

$respuesta = new xajaxResponse();

1.2 Asignar un resultado a la respuesta

$respuesta->assign(“nombreDelIdQueRecibeLaRespuesta”,”innerHTML”,”contenidoDeLaRespuesta”);

1.3 Retornar la respuesta

return($respuesta);

2. En el codigo HTML

2.1 Definicion de donde se recibe la respuesta

<div id=”nombreDelIdQueRecibeLaRespuesta”></div>