Contenido Ejemplo práctico de autocompletar con jQuery ................................................................................. 2

Paso 1. Cargar las librerías 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 búsqueda ........................................................................ 4

Ejemplo práctico de Ajax y JSON con jQuery ...................................................................................... 5

Ajax .................................................................................................................................................. 5

JSON ................................................................................................................................................ 6

Un ejemplo práctico ........................................................................................................................ 6

Paso 1. Cargar las librerías 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 búsqueda de registros en el servidor ........................................................................... 12

Conclusión ..................................................................................................................................... 13

Ejemplo prá ctico de áutocompletár con jQuery

Supongamos, que se desea desarrollar un formulario que servirá para capturar

productos. Como el catálogo de productos es enorme, no podemos darnos el lujo

de descargar todas las opciones. Nos conviene crear un catálogo con un índice que

sea efectivo y traer solamente aquella información 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 información correspondiente.

Tendremos una rutina en PHP que nos proveerá la información que necesitamos en

forma de un arreglo de objetos y formateados en JSON. Esto último porque verás

que es muy sencillo bajar información para utilizarla en javascript a conveniencia.

Paso 1. Cargar las librerías de jQuery

Lo más común es colocarlas al inicio del documento, dentro de la sección de cabecera del

formulario, Aquí un ejemplo de cómo podría 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 código que será puesto en la función 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 colección de elementos

está formada por cadenas únicamente. Cuando la colección de elementos la conforma objetos

(como en nuestro ejemplo), veremos escrito “[Object object]” en nuestro control.

A continuación un ejemplo de cómo manejarlo (Imagen 3). Esto debes colocarlo después de la

rutina de inicialización:

Imagen 3

El evento “select” es el que se invoca cuando el usuario ha seleccionado una opción. De nueva

cuenta, si la colección de elementos estuviera formada por cadenas jQuery haría muy bien el

trabajo, pero si esta está formada por objetos veremos nuevamente el horroroso “[Object object]”

en nuestro control.

A continuación un ejemplo de cómo manejarlo. Esto debes colocarlo justo después de la rutina

anterior, como se muestra en la Imagen 4:

Imagen 4

Paso 4. Agregar la rutina en PHP para la búsqueda

Deseo conservar este ejemplo lo más simple posible, por lo que no entraré en detalles de conexión

a base de datos, ejecución de scripts y demás 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 término o criterio de la búsqueda y filtraremos los resultados. Ahora crearemos el archivo

buscar.php en donde colocaremos el siguiente código mostrado en la Imagen 5:

Imagen 5

Conclusión

Este es apenas una pequeña parte de lo que se necesita para realizar una aplicación Web

completa, pero espero que te de ideas de las posibilidades. No dudes en cambiar el código para

ver los diferentes resultados o ponerte en contacto si tienes alguna duda.

Ejemplo prá ctico de Ajáx y JSON con jQuery

Hoy en día contamos con muchas opciones para realizar llamadas Ajax en nuestras aplicaciones

Web, pero sin duda la más 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 tecnología bastante vieja a pesar de lo que se piensa, aunque el uso práctico comienza

unos años atrás. 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 código y

el resultado que podemos obtener con ellas pueden ser JSON, HTML, XML, TXT, etc.

JSON

Esta es una notación 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 práctico

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 propósito 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 librerías de jQuery

Lo más común es colocarlas al inicio del documento, dentro de la sección de cabecera del

formulario, Aquí un ejemplo de cómo podría 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 código que será puesto en la función de inicio en la

Imagen 7.

Imagen 7

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

En el parámetro “source” se configura o específica la URL del archivo que se encargará de realizar

la búsqueda, en este caso esta URL apunta al archivo buscar.php, el código 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 colección de elementos

está formada por cadenas únicamente. Cuando la colección de elementos la conforma objetos

(como en nuestro ejemplo), veremos escrito “[Object object]” en nuestro control.

A continuación un ejemplo de cómo manejarlo (Imagen 9). Esto debes colocarlo después de la

rutina de inicialización:

Imagen 9

El evento “select” es el que se invoca cuando el usuario ha seleccionado una opción. De nueva

cuenta, si la colección de elementos estuviera formada por cadenas jQuery haría muy bien el

trabajo, pero si esta está formada por objetos veremos nuevamente el horroroso “[Object object]”

en nuestro control.

A continuación un ejemplo de cómo manejarlo. Esto debes colocarlo justo después de la rutina

anterior, como se muestra en la Imagen 10:

Imagen 10

En este evento, además de recuperar los datos de la materia seleccionada, tomaremos el registro

correspondiente y lo utilizaremos para la consulta que necesitamos.

Observa que en la línea encerrada en el recuadro rojo de este script hacemos una llamada a otra

función, quien es la encargada de lanzar la consulta Ajax. Presta atención al hecho de que en la

línea 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 función.

Paso 4. La llamada Ajax para recuperar los alumnos

Esta función 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 más. Sin duda esto puede

simplificarse todavía más, pero lo dejaremos así para lograr que el código quede más 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 función “ajax”, que

forma parte de jQuery, para indicarle que deseo una consulta por el método POST, le indico las

variables y le especifico que rutinas se encargarán de manejar el resultado.

En la rutina “callback_error”, como su nombre lo indica, tan solo se mostrará un mensaje cuando

se presente una excepción. Observa que para que esto funcione se necesitan dos cosas: la primera

es especificar la función como parte de la llamada “ajax” bajo la propiedad “error” y la segunda es

que la función 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 menciónó hace un momento y coloca los

datos en la tabla.

Se utiliza una técnica muy sencilla para colocar los datos en la tabla. Hay otras, por supuesto más

elaboradas.

Observa que en la línea de código 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 línea

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 búsqueda de registros en el servidor

Para esto necesitaremos crear un archivo con terminación PHP de nombre “alumnos.php”. Puedes

ver el ejemplo en el código en la Imagen 15.

Imagen 15

Observa que esta técnica implica crear un arreglo en 3 dimensiones, cosa que no es muy práctico

en una aplicación real, pero para nosotros será más que suficiente. Observa que el primer índice

son números, los que representan el identificador de la materia. Se decide realizarlo de esta

manera pues así podríamos 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 código en

javascript, una de las variables que se envía al servidor es el identificador de la tarea que se llevará

a cabo. Actualmente utilizo otras opciones, pero esta me ha resultado muy práctica 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 emplear, pero

algunas versiones de PHP no la incluyen, por eso se agrega una opción manual. Además, así resulta

más divertido para este manual.

Conclusión

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 términos de

seguridad, eficiencia, etc.