En diversos proyectos he tenido la necesidad de trabajar con un formulario en el que uno de los campos es un selector de provincias y localidades de España. Tal vez usted también haya tenido esta misma necesidad durante el desarrollo de un proyecto.
En un enfoque tradicional sería necesario cargar en memoria todas las provincias y localidades, o dividir el proceso en dos fases: en la primera el usuario elegiría su provincia para luego seleccionar su localidad en un segundo paso. Un ejemplo de este enfoque tradicional es la web de páginas amarillas. Observe que el tiempo de carga de la página es considerablemente elevado.
Las nuevas técnicas de desarrollo web 2.0 nos ofrecen ahora la posibilidad de resolver este tipo de funcionalidades de una manera mucho más elegante y eficiente.
Ejemplo de combo dinámico en Ajax
En un enfoque 2.0 he desarrollado este ejemplo en el que puede ver un formulario que permite al usuario seleccionar su localidad de manera muy rápida y eficiente. Ajax nos permite trabajar con un documento XML de más de 2Mb que contiene todas las localidades de España, cargando en memoria únicamente la información que necesitemos en cada momento.
En el siguiente esquema se explica el funcionamiento de la aplicación Ajax:
Esta funcionalidad consta de los siguientes archivos:
- default.php: página incial dónde se generan dinámicamente el combo de provincias a partir del XML general.
- xml_data_provider.php: recorre el XML general y devuelve otro XML que contiene sólo las localidades de la provincia escogida.
- AjaxCode.js: funcionalidad Ajax que lee el XML con las localidades elegidas y crea dinámicamente el combo de localidades.
- provinciasypoblaciones.xml: Archivo XML que contiene todas las localidades y provincias de España.
Esta misma funcionalidad puede utilizarla para manejar cualquier XML de gran tamaño que de otra forma se mostraría inmanejable y ralentizaría mucho el tiempo de carga de su Site: fichas de clientes, un catalogo de productos, etc.
El tiempo de carga de una página y el consiguiente tiempo de espera de un usuario es uno de los factores más importantes en el rendimiento de una web. Tal y como se desprende del estudio sobre usabilidad realizado por Peter Sevcik en Julio de 2002, el tiempo de carga de una página no debe dilatarse más de 10 segundos para mantener el nivel de satisfación del usuario dentro de los límites óptimos. A partir de este límite el usuario empieza a percibir que la página está tardando en cargar y cuando se rebasa los 40 segundos la fustración y pérdida de interes del usuario por la página aumenta de manera muy acusada.
El código.
En el siguiente archivo zip dispone de todos los ficheros y recursos que conforman la aplicación. Siéntase libre de utilizarlo en su página web. Si le resultó de utilidad o encontró cualquier problema le agradecería mucho conocer su feedback.
Febrero 14th, 2007 a las 8:22 pm
Selector combo dinámico en Ajax…
Un selector en Ajax, idóneo para creación de formularios….
Febrero 15th, 2007 a las 8:25 pm
Selector combo dinámico en Ajax: localidades y provincias de España…
Un selector en Ajax, idóneo para creación de formularios….
Febrero 19th, 2007 a las 5:42 pm
Muy bueno, sos un capo
Saludos desde Buenos Aires Argentina
Abril 3rd, 2007 a las 9:55 pm
Muy Eficiente tu Script, pero si dieras una solucion alos que tienen la version php4 o menor por que tu script solo agarra en php5
saludos
Abril 3rd, 2007 a las 11:19 pm
Hola.
Pues sí, tienes razón, sólo corre con php5.
Un saludo.
Abril 26th, 2007 a las 12:38 pm
alguien tendra alguno con las ciudades del mundo?
se que es mucho pedir, pero necesitaré un para vuelos de todas las principales ciudades que tienen aeropuerto del mundo.
gracias
Driss
Abril 26th, 2007 a las 1:59 pm
Hola.
Un xml con todas las ciudades del mundo, seguro que puedes conseguirlo. Otra cuestión es, si gratuitamente…
En cualquier caso prueba a buscar “XML DATA REPOSITORY” en Google, verás que existen montones de documentos XML en la red. Casí seguro que encontrarás lo que buscas.
Un saludo.
Mayo 30th, 2007 a las 11:46 am
No hay forma de hacerlo funcionar en PHP 4?
Mayo 30th, 2007 a las 12:05 pm
Puedes conseguir lo mismo con PHP4, pero deberías manejar el XML con otras librerías.
Junio 8th, 2007 a las 11:51 am
Me ha encantado el artículo y el código facilitado. Te lo agradezco mucho, sirve de verdadera ayuda a mucha gente.
En cuanto a que si es para PHP5, o si se podría hacer con otras bases de datos (ciudades del mundo…). Que lo haga cada uno a partir de lo que aquí se cede. Ignacio ha dejado una muy buena base, pero no puede solucionar el problema concreto de cada uno de principio a fin.
Muchas gracias. Un saludo.
Junio 8th, 2007 a las 11:57 am
Hola Antonio,
Efectivamente mi idea es que este código puede servir de base para que cualquiera pueda realizar un desarrollo más personalizado.
Muchas gracias por tu comentario.
Julio 26th, 2007 a las 11:56 pm
Seria chevere si dieras el codigo para jsp
Te lo agradeceria de veras
Agosto 28th, 2007 a las 7:53 pm
Hola muy interesante pero una pregunta como lleno un combo con la informacion de una tabla catalogo (soy nuevo en esto)
agradecere mucho la ayuda ya que pues si quiero y necesito aprender gracias
Octubre 9th, 2007 a las 6:49 pm
[…] Check it out! While looking through the blogosphere we stumbled on an interesting post today.Here’s a quick excerpt […]
Noviembre 7th, 2007 a las 2:29 pm
Muy interesante tu nota
Enero 17th, 2008 a las 3:40 pm
Muy buen material. Gracias al autor… Con ganas de modificarlo para Argentina. Si hay alguien que busca lo mismo me avisa (cittadini@gmail.com), hoy voy a estar modificandolo.
Gracias.
Leandro.-
Febrero 21st, 2008 a las 11:21 pm
Muy buen articulo gracias….Tengo una pregunta haber si alguien me puede ayudar: como lo puedo hacer para sacar los datos de una tabla en una base de datos?…Gracias.
Marzo 11th, 2008 a las 11:36 pm
El articulo es muy bueno, gracias.
Acabo de visitar tu web por primera vez y me parece muy interesante con mucho contenido muy útil.
Marzo 12th, 2008 a las 9:03 pm
Gracias por tu comentario.
Un saludo.
Abril 2nd, 2008 a las 6:12 pm
Ignacio gracias por el articulo, tengo una consulta a ver si me puedes echar una manito…O cualquier usuario que pueda, se agradese. ¿Como lo hago al elegir en el segundo select (localidad) que me de una pequeña descripcion de la localidad elegida?como tomo ese valor elegido por el usuario en el onChange. Uta se agradese Mil…
Abril 8th, 2008 a las 12:01 am
No tengo bien concreta la idea de hacer uno con 3 combos (Departamento,Provinvia,distrito)si alguien podria brindarme alguna idea de como hacerlo
Abril 10th, 2008 a las 1:40 am
Hola..
Quiero leer un XML dinamico generado con php y cuando pongo el archivo php como parametro en la funcion simplexml_load_file en el archivo xml_provider no me salen los datos del segundo combo, se queda en blanco, comparo el archivo xml con la salida del php y me da el mismo formato, asi que no se cual sea el problema
de antemano gracias
Abril 10th, 2008 a las 9:56 am
Hola Josue.
Comprueba que el Content-Type de los datos devueltos por el php sea text/xml. Si el XML está correctamente formado y su formato es el apropiado, el error puede estar relacionado con el Content-Type.
Un saludo.