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.