Contenido

Ejemplo prctico de autocompletar con jQuery ................................................................................. 2 Paso 1. Cargar las libreras de jQuery.............................................................................................. 2 Paso 2. Colocar la rutina de inicio ................................................................................................... 3 Paso 3. Implementar los eventos select y focus ....................................................................... 3 Paso 4. Agregar la rutina en PHP para la bsqueda ........................................................................ 4 Ejemplo prctico de Ajax y JSON con jQuery ...................................................................................... 5 Ajax .................................................................................................................................................. 5 JSON ................................................................................................................................................ 6 Un ejemplo prctico ........................................................................................................................ 6 Paso 1. Cargar las libreras de jQuery.............................................................................................. 6 Paso 2. La rutina de inicio................................................................................................................ 7 Paso 3. Las rutinas de autocompletar para la lista de materias ..................................................... 7 Paso 4. La llamada Ajax para recuperar los alumnos ...................................................................... 9 Paso 5. La bsqueda de registros en el servidor ........................................................................... 12 Conclusin ..................................................................................................................................... 13

Ejemplo prctico de utocompletr con jQuery

Supongamos, que se desea desarrollar un formulario que servir para capturar productos. Como el catlogo de productos es enorme, no podemos darnos el lujo de descargar todas las opciones. Nos conviene crear un catlogo con un ndice que sea efectivo y traer solamente aquella informacin que sea de utilidad. Vamos a crear un formulario que contenga 2 campos: cantidad y nombre de producto; as como un script que nos proveer la informacin correspondiente. Tendremos una rutina en PHP que nos proveer la informacin que necesitamos en forma de un arreglo de objetos y formateados en JSON. Esto ltimo porque vers que es muy sencillo bajar informacin para utilizarla en javascript a conveniencia. Paso 1. Cargar las libreras de jQuery
Lo ms comn es colocarlas al inicio del documento, dentro de la seccin de cabecera del formulario, Aqu un ejemplo de cmo podra ser tu formulario:

Imagen 1

Paso 2. Colocar la rutina de inicio

Siempre es una buena idea comenzar a trabajar justo cuando ya todo est listo o se ha descargado. Si no lo haces as, luego aparecen los famosos Errores Fantasma que provocan que ciertas partes de tus scripts no trabajen de forma adecuada. Lo primero a realizar es crear una carpeta para colocar el archivo javascript para contener todas las rutinas necesarias, o incluso otros archivos javascript. Ahora vemos el cdigo que ser puesto en la funcin de inicio en la Imagen 2.

Imagen 2

Paso 3. Implementar los eventos select y focus

El evento focus se invoca cuando un elemento de la lista es resaltado. Esto ocurre cuando el usuario utiliza las flechas para moverse entre las opciones o cuando pasa el puntero del mouse entre las opciones. Para este plug in, que tenga el foco significa simplemente que est marcada, pues el foco real lo conserva el control, esto por si el usuario desea seguir escribiendo para modificar el filtro. jQuery hace esto de forma predeterminada, pero solo funciona cuando la coleccin de elementos est formada por cadenas nicamente. Cuando la coleccin de elementos la conforma objetos (como en nuestro ejemplo), veremos escrito [Object object] en nuestro control. A continuacin un ejemplo de cmo manejarlo (Imagen 3). Esto debes colocarlo despus de la rutina de inicializacin:

Imagen 3

El evento select es el que se invoca cuando el usuario ha seleccionado una opcin. De nueva cuenta, si la coleccin de elementos estuviera formada por cadenas jQuery hara muy bien el trabajo, pero si esta est formada por objetos veremos nuevamente el horroroso [Object object] en nuestro control.

A continuacin un ejemplo de cmo manejarlo. Esto debes colocarlo justo despus de la rutina anterior, como se muestra en la Imagen 4:

Imagen 4

Paso 4. Agregar la rutina en PHP para la bsqueda

Deseo conservar este ejemplo lo ms simple posible, por lo que no entrar en detalles de conexin a base de datos, ejecucin de scripts y dems tareas para recuperar datos. Lo que se har es crear un script muy simple con un arreglo de productos y cada vez que se ejecute el script, se recuperar el trmino o criterio de la bsqueda y filtraremos los resultados. Ahora crearemos el archivo buscar.php en donde colocaremos el siguiente cdigo mostrado en la Imagen 5:

Imagen 5

Conclusin
Este es apenas una pequea parte de lo que se necesita para realizar una aplicacin Web completa, pero espero que te de ideas de las posibilidades. No dudes en cambiar el cdigo para ver los diferentes resultados o ponerte en contacto si tienes alguna duda.

Ejemplo prctico de Ajx y JSON con jQuery

Hoy en da contamos con muchas opciones para realizar llamadas Ajax en nuestras aplicaciones Web, pero sin duda la ms popular es la propuesta de jQuery. Este mecanismo es muy sencillo de utilizar, pero involucra tener en cuenta algunos conceptos importantes.

Ajax
Esta es una tecnologa bastante vieja a pesar de lo que se piensa, aunque el uso prctico comienza unos aos atrs. Su nombre viene de las siglas Asynchronous JAvascript And Xml. No voy a profundizar en el tema, tan solo mencionar que estas son consultas invocadas mediante cdigo y el resultado que podemos obtener con ellas pueden ser JSON, HTML, XML, TXT, etc.

JSON
Esta es una notacin en Javascript utilizada para objetos. Tampoco voy a profundizar en el tema, solo mencionar que podemos utilizarlo para enviar y recibir datos desde y hacia un formulario web.

Un ejemplo prctico
Supongamos que tenemos una lista de materias en una escuela y que deseamos recuperar los registros de los alumnos que se han suscrito a cada materia. Hay muchas formas de lograrlo, pero para nuestro propsito utilizaremos un formulario para recuperar los datos de una materia y ejecutaremos una consulta en Ajax con jQuery para recuperar los datos de los alumnos, mismos que colocaremos en una tabla en la parte inferior del formulario.

Paso 1. Cargar las libreras de jQuery

Lo ms comn es colocarlas al inicio del documento, dentro de la seccin de cabecera del formulario, Aqu un ejemplo de cmo podra ser tu formulario:

Imagen 6

Paso 2. La rutina de inicio

Lo primero a realizar es crear una carpeta para colocar el archivo javascript para contener todas las rutinas necesarias, o incluso otros archivos javascript. Lo primero a realizar es crear una carpeta para colocar el archivo javascript para contener todas las rutinas necesarias, o incluso otros archivos javascript. Ahora vemos el cdigo que ser puesto en la funcin de inicio en la Imagen 7.

Imagen 7

Paso 3. Las rutinas de autocompletar para la lista de materias

En el parmetro source se configura o especfica la URL del archivo que se encargar de realizar la bsqueda, en este caso esta URL apunta al archivo buscar.php, el cdigo de dicho archivo lo podemos ver en la Imagen 8.

Imagen 8

El evento focus se invoca cuando un elemento de la lista es resaltado. Esto ocurre cuando el usuario utiliza las flechas para moverse entre las opciones o cuando pasa el puntero del mouse entre las opciones. Para este plug in, que tenga el foco significa simplemente que est marcada, pues el foco real lo conserva el control, esto por si el usuario desea seguir escribiendo para modificar el filtro. jQuery hace esto de forma predeterminada, pero solo funciona cuando la coleccin de elementos est formada por cadenas nicamente. Cuando la coleccin de elementos la conforma objetos (como en nuestro ejemplo), veremos escrito [Object object] en nuestro control. A continuacin un ejemplo de cmo manejarlo (Imagen 9). Esto debes colocarlo despus de la rutina de inicializacin:

Imagen 9

El evento select es el que se invoca cuando el usuario ha seleccionado una opcin. De nueva cuenta, si la coleccin de elementos estuviera formada por cadenas jQuery hara muy bien el trabajo, pero si esta est formada por objetos veremos nuevamente el horroroso [Object object] en nuestro control. A continuacin un ejemplo de cmo manejarlo. Esto debes colocarlo justo despus de la rutina anterior, como se muestra en la Imagen 10:

Imagen 10

En este evento, adems de recuperar los datos de la materia seleccionada, tomaremos el registro correspondiente y lo utilizaremos para la consulta que necesitamos. Observa que en la lnea encerrada en el recuadro rojo de este script hacemos una llamada a otra funcin, quien es la encargada de lanzar la consulta Ajax. Presta atencin al hecho de que en la lnea con el recuadro azul recuperamos un objeto con todos los datos de la materia y es el mismo que empleamos para llamar a la otra funcin.

Paso 4. La llamada Ajax para recuperar los alumnos

Esta funcin es la interesante (Imagen 11). Desde aqu realizaremos nuestra consulta Ajax e indicaremos a jQuery como deseamos manejarla.

Imagen 11

Observa que completar este proceso ha tomado 3 funciones ms. Sin duda esto puede simplificarse todava ms, pero lo dejaremos as para lograr que el cdigo quede ms claro. En la rutina recuperarAlumnos obtenemos todos los datos de la materia para la cual deseamos recuperar los registros de alumno. Primero armo una variable de nombre data en donde colocar todas las variables que deseo enviar al servidor. Luego ejecuto la funcin ajax, que forma parte de jQuery, para indicarle que deseo una consulta por el mtodo POST, le indico las variables y le especifico que rutinas se encargarn de manejar el resultado. En la rutina callback_error, como su nombre lo indica, tan solo se mostrar un mensaje cuando se presente una excepcin. Observa que para que esto funcione se necesitan dos cosas: la primera es especificar la funcin como parte de la llamada ajax bajo la propiedad error y la segunda es que la funcin reciba los argumentos request, status y error. Los primeros 2 tienen que ver con la solicitud que se ha ejecutado y el tercero nos dar el mensaje correspondiente. Todo esto, por supuesto, debe manejarse con mucho criterio, aqu se utilizar una rutina muy simple, como lo muestra la Imagen 12.

Imagen 12

En la rutina procesarRespuesta (Imagen 13) se hace eso precisamente. Se toman los datos que jQuery nos ha enviado y se recuperan los datos en el servidor decodificando el resultado que est en JSON y obteniendo un arreglo con los datos de los alumnos.

Imagen 13

Finalmente, la rutina recuperarAlumnos_callback (Imagen 14) es la que recibe la respuesta de jQuery, procesa los resultados utilizando la rutina que se mencin hace un momento y coloca los datos en la tabla. Se utiliza una tcnica muy sencilla para colocar los datos en la tabla. Hay otras, por supuesto ms elaboradas. Observa que en la lnea de cdigo encerrada por el recuadro rojo recuperamos un manejador de jQuery que me servir para manipular la tabla, pasamos el selector #tblAlumnos porque as le especificamos que debe encontrar un elemento HTML con ese identificador. En la siguiente lnea eliminamos todos los registros de la tabla salvo el primero, que es donde se encuentran los encabezados. La ltima parte es un ciclo en donde tomaremos cada uno de los registros de alumnos y colocaremos los datos dentro de la tabla. Observa que para esto empleamos la rutina append del manejador de jQuery, la cual inserta los elementos especificados al final del elemento manejado pero en su interior, es decir, agrega los registros al final de la tabla.

Imagen 14

Paso 5. La bsqueda de registros en el servidor

Para esto necesitaremos crear un archivo con terminacin PHP de nombre alumnos.php. Puedes ver el ejemplo en el cdigo en la Imagen 15.

Imagen 15

Observa que esta tcnica implica crear un arreglo en 3 dimensiones, cosa que no es muy prctico en una aplicacin real, pero para nosotros ser ms que suficiente. Observa que el primer ndice son nmeros, los que representan el identificador de la materia. Se decide realizarlo de esta manera pues as podramos poner los ndices como texto o con el valor que deseemos sin tener que recurrir al ndice del registro como su identificador. En todo caso, para este ejemplo bien hubiera podido utilizar el ndice. Ahora sigue la parte del proceso de la tarea a realizar (Imagen 16). Si recuerdas el cdigo en javascript, una de las variables que se enva al servidor es el identificador de la tarea que se llevar a cabo. Actualmente utilizo otras opciones, pero esta me ha resultado muy prctica en aplicaciones sencillas. Dependiendo del identificador de la tarea, es la rutina que llamaremos.

Imagen 16

Imagen 17

Esta rutina es bastante simple, tomamos el identificador de la materia especificada e imprimimos un arreglo con los datos de los alumnos relacionados. Observa que esto puede realizarse de forma muy simple con una rutina que se llama json_encode que recibe los datos a emple ar, pero algunas versiones de PHP no la incluyen, por eso se agrega una opcin manual. Adems, as resulta ms divertido para este manual.

Conclusin
Este es apenas un ejemplo sencillo de todo lo que se necesita para manejar llamadas Ajax con JSON. Hay mucho que investigar a partir de aqu, pues es necesario pensar en trminos de seguridad, eficiencia, etc.