Enrutar aplicaciones con Phalcon PHP
Enrutar aplicaciones con Phalcon PHP
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

En este tutorial vamos a ver como popular selects y campos de texto en cascada con Phalcon haciendo uso de jQuery, de esta forma, empezaremos a ver lo sencillo que puede ser hacer cosas útiles con ajax en phalcon.

Nuestro ejemplo será simple, utilizaremos provincias, poblaciones y sus respectivos códigos postales, así pues, cuando cargue la página, el primer desplegable contendrá todas las provincias, una vez escojamos una, el select que contiene las poblaciones se llenará con las que pertenecen a esa provincia, y, a la misma vez, el campo de texto que contiene el código postal se llenará con el código postal de esa población, cada vez que cambie la población, el código postal también lo hará.

Creo que es simple y bastante claro, así que espero que te resulte útil, podemos empezar.

Lo primero que debemos hacer es descargar e importar la siguiente base de datos con las tablas provincias y poblaciones llamada selects_phalcon a nuestro gestor.

bd_selects_phalcon

Una vez lo tengamos hecho, podemos crear nuestro proyecto y hacer la configuración con nuestra base de datos en el archivo config/config.php, si tienes problemas con la codificación de mysql puedes solucionarlo con este tutorial.

Ahora que ya tenemos creado el proyecto y configurada la conexión contra nuestra base de datos, podemos crear los modelos.

Si ahora te diriges a la carpeta models verás como se han creado ambos modelos. Ahora es momento de empezar a crear la lógica de nuestra sencilla aplicación, así que podemos empezar por añadir al método indexAction el siguiente código.

Eso es, obtenemos las provincias en orden ascendente y devolvemos un array vacío que representará a las poblaciones, ésto será útil para los campos de selección.

Ahora abre el archivo views/index/index.volt y añade el siguiente código, que es todo el que vamos a necesitar.

Como puedes ver, hacemos uso de volt para crear los campos de selección y de texto, y, si nos fijamos, vemos como los de selección tienen como segundo parámetro los datos que hemos pasado desde el controlador.

Si ahora abres la vista correspondiente en tu navegador verás que el primer desplegable ya ha sido populado nada más cargar la página, en cambio el de las poblaciones y el campo de texto del código postal no.

Para que el campo de selección de las poblaciones sea populado, debemos añadir una nueva acción en nuestro controlador, que es la que se llama con jQuery en el evento change del campo con id poblaciones, así que abre de nuevo el controlador y añade el siguiente código.

Si nos fijamos, el json que devolvemos contiene todas las poblaciones y el código postal de la primera, de esta forma, al cargar las poblaciones, el campo del código postal contendrá la que corresponde a dicha población.

Si ahora cambias el campo provincia, verás como el de las poblaciones se llena y el campo de texto también lo hace con el código postal de dicha población, ahora sólo falta ver como llenar el campo del código postal al cambiar la población, es tan sencillo como sigue.

La diferencia más apreciable en comparación con el método que obtiene las poblaciones, es que aquí, en lugar de utilizar el método find del modelo, utilizamos findFirst, ya que sólo queremos uno, de esta forma, el resultado obtenido es un simple objeto con la información de ese código postal.

Y esto es todo, espero que te haya parecido interesante y te sea de utilidad, saludos.