Argentina, provincia-localidad con jquery cascade + alguito de py

Buenassss En el trabajo diario por ahí usamos programitas que nos salvan las papas no es que siempre estamos ocupando super-librerias o instalamos cosas re-delirio algunas veces usamos los lenguajes para tareas administrativas y safar del paso, este post presenta un ejemplillo pillo. Siempre está el temita de combos anidados para pais-provincia-localidad, este es un esquema que casi siempre venimos replicando en las aplicaciones, hay muchas bases de datos y planillas de cálculo con esta información. Por lo general acomodar todo a mano, hacer las relaciones es un dolor de cabeza porque se mezcla todo. Hoy de tarde en los recreos laborales estuve viendo de como hacer para integrar todo en javascript para tener a mano el esquema de la Argentina con todas sus provincias y ciudades. Para eso usé un lenguaje muy compinche python y formateé unos archivos para después usar un plugin copado jQuery Cascade.

  • Primero acomodé las provincias y sus respectivas ciudades: simple y cortito, 1 archivo de las provincias una abajo de la otra provincias.txt. Buenos Aires Catamarca Chaco Chubut ... Las localidades de la misma manera y agregué un caracter especial donde comienza una provincia. localidades.txt !23 Río Grande Tolhuin Ushuaia !24 Acheral Agua Dulce Aguilares Alderetes  Ahi vemos como el !23 corresponde a Tierra del fuego y el !24 Tucumán. Esto lo hacés en 2 minutitos y es solo para detectar luego en la programación.
  • Luego vemos que el formato necesario para JQuery Cascade es bastante particular. Provincias [ {'When':'AR','Value':'AR-0','Text':'Buenos Aires'}, {'When':'AR','Value':'AR-1','Text':'Catamarca'}, {'When':'AR','Value':'AR-2','Text':'Chaco'}],... ] Localidades [ {'When':'AR-0','Value':'AR-0-1','Text':'25 de Mayo'}, {'When':'AR-0','Value':'AR-0-2','Text':'3 de febrero'}, {'When':'AR-0','Value':'AR-0-3','Text':'A. Alsina'}, {'When':'AR-0','Value':'AR-0-4','Text':'A. Gonzáles Cháves'}, {'When':'AR-0','Value':'AR-0-5','Text':'Aguas Verdes'},... ] Imagínense hacerlo a manopla es la muerte, hay más de 2400 localidades. Estas configuraciones las guardamos en sus respectivas datos-provincias.js y datos-localidades.js
  • Ahora el script en python lo escribí en un archivito armador.py que hace todo el trabajo por nosotros. Se podría hacer en bash si sos mas Mc’guiver o en otro lenguaje pero van a ver lo simple que es con la viborita. #Abrimos los archivos para manipularlos #Archivos origen provincias = open("provincias.txt","r") localidades = open("localidades.txt","r") #Archivos destino salida_prov = open("../jquery-cascade/datos-provincias.js","w") salida_local = open("../jquery-cascade/datos-localidades.js","w") i1, i2, i3 = 0, -1, 0 salida_prov.write("[") for prov in provincias.readlines(): # escribimos el archivo con el formato de datos-provincias.js ...: salida_prov.write("\n{'When':'AR','Value':'AR-%d','Text':'%s'}," % (i1, prov[:-1])) ...: i1 += 1 salida_prov.write("\n]")salida_local.write("[") for local in localidades.readlines(): ...: if local[0]=="!": ...: ...: i2 += 1 ...: else: # escribimos el archivo con el formato de datos-localidades.js ...: ...: salida_local.write("\n{'When':'AR-%d','Value':'AR-%d-%d','Text':'%s'}," % (i2, i2, i3, local[:-1])) ...: i3 += 1 salida_local.write("\n]") # Ahora cerramos los archivos localidades.close() provincias.close() salida_prov.close() salida_local.close() Luego vamos a la carpeta y hacemos por consola   python armador.py . De esta manera se crearán los archivos necesarios para que funcione y se escribirán en su carpeta correspondiente.
  • Después viene la parte de HTML y jQuery, eso ya no es necesario saber mucho porque está bastante clarito en la carpetita jquery-cascade que les dejo en el adjunto, en esta partecita lo importante es dejarles que vean como lo hace desde javascript. Se puede hacer en los niveles que necesiten sabés. jQuery(document).ready(function() { $("#provincia").cascade("#pais",{ ajax: {url: 'datos-provincias.js'}, template: commonTemplate, match: commonMatch });$("#ciudad").cascade("#provincia",{ ajax: {url: 'datos-localidades.js'}, template: commonTemplate, match: commonMatch });//forzamos un evento de cambio para que se carge por primera vez $("#pais").change(); });

Les dejo los archivos en este (ZIP) Los archivos de texto de entrada están en la carpeta python-lib y el demo de los combos está en la carpeta jquery-cascade. bye espero les sirva!!!! Cualquier cosa me chiflan

Etiquetado , , , , , ,

11 pensamientos en “Argentina, provincia-localidad con jquery cascade + alguito de py

  1. el sapox dice:

    Grande josi!!! muy bueno!! un abrazo!!

  2. no esta mas el archivo. podes subirlo o mandarlo?

  3. gracias, pero no anda con las ultimas versiones de jquery, solo vi que anda con la version 1.2.6 que es la que tienes en el ejemplo. Tienes idea por que puede ser?

    • jositux dice:

      cascade por lo que vi hoy ni siquiera esta habilitado su website, voy a ver de actualizar a otra libreria… quizas el finde, porque ahora tengo mucho trabajo😛. 1 año es una eternidad:/

  4. Denis dice:

    Gracias!!! muy bueno

Dejá una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: