Servicios de desarrollo

Listas en cascada jquery en KumbiaPHP

Ultimamente hay pocas y no muy interesantes noticias en el mundo linux asi que aprovecho para postear otro ejemplo mas de lo que voy aprendiendo con KumbiaPHP framework. Esta vez lo que les voy a mostrar es un ejemplo de listas enlazadas usando jquery. El ejemplo mas completo (pero mas largo) esta en la wiki de kumbiaphp, a mi no me gusta que sea largo sino lo mas simple posible por eso lo voy a acortar un poquito.

Primero deben saber de que se tratan las listas enlazadas o en cascada, son esos combobox o selects en los que uno al seleccionar una categoria se cargan las subcategorias en otro combobox. En PHP seria sumamente facil hacerlo, el chiste es lograr hacerlo sin recargar la pagina ya que sino seria incomodo para los usuarios.

El ejemplo final quedara algo asi:

Al seleccionar una categoria inmediatamente semostraran las subcategorias en la lista de al lado recojiendo la informacion desde la base de datos.Esta va a ser nuestra base de datos de ejemplo:

Vamos a tener un controlador llamado categorias_controller.php con las acciones index y mostrarSubCat con sus correspondientes vistas y vamos a hacer uso de un partial (cascada.phtml) para facilitarnos la vida.

Primero vamos a ver que en la accion index.phtml tenemos lo siguiente:

Seleccione una categoria:<br/>
<? echo select_tag(array(
'categorias.id',
'Categorias', 'option'=>'nombre',
'size'=>7
)) ?>

<?View::partial('cascada')?>
<div id='div_subcategorias'></div>
Lo unico que hacemos alli es mostrar el primer combo con las categorias, y el div es donde se cargara lo que deseemos, en este caso, otro combobox con las subcategorias.
El partial en este caso tiene el codigo jquery para detectar cuando ocurre un cambio en el select (combobox) y mostrar algo en el div. Este es el codigo del partial:
<script type="text/javascript">
$("#categorias_id").change(function(){
var categorias_id=$('#categorias_id').val();
url="<?php echo PUBLIC_PATH.'admin/mostrarSubCat/'; ?>" + categorias_id;
$("#div_subcategorias").load(url);
});
</script>
Son solo unas pocas lineas cochinas muy faciles de entender.
En el controlador, mas especificamente en la accion mostrarSubCat vamos a recibir como parametro el valor de id de la categoria o sea del primer select.
public function mostrarSubCat($categorias_id=0){
// es para no enviar el template
$this->set_response('view');
//para tenerlo disponible en la vista
$this->categorias_id = $categorias_id;
}
En la vista que hacemos? Lo que queramos, en este caso solo vamos a cargar otro combobox con las subcategorias pero si lo piensan el codigo visto hasta aqui tiene muchisimas posibilidades de uso. La vista mostrarSubCat.phtml tiene esto:
Seleccione una subcategoria:<br/>
<?php
echo select_tag(array("subcategorias.id",
'order' => 'nombre',
'Subcategorias', 'option'=> 'nombre',
'conditions'=> "categorias_id = $categorias_id",
'size'=>7));
Eso es todo, en realidad es muy muy basico lo que les acabo de mostrar pero si se ponen a hacer algunas modificaciones pueden hacer cosas mas interesantes o incluso ampliar mas el partial para ahorrar todavia mas codigo si es que lo van a usar mucho en su aplicacion, o cargar muchas cosas distintas que no sean categorias, por ejemplo: al hacer click en una categoria que muestre la imagen de esa categoria, para eso lo unico que tendrian que hacer es mostrar en la segunda vista la imagen en vez de las subcategorias y listo.
Espero que se entienda, sino me preguntan asi vemos si lo podemos resolver o se pasan por el IRC de KumbiaPHP.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

3
Comenta!

avatar
burgosana
burgosana

oye Perro! de verdad me encantan tus tutos… y me encantarían más si fueran siempre en Beta 2 jeje… gracias!!!!

facer8025
facer8025

Hola gran tutorial!!! Tengo una pregunta, resulta utilizo este método para el caso de la localidad. Antes de implementar listas enlazadas, el formulario se guardaba en la BD correctamente, pero cuando implemente esta mejora, ya no guardo mas. Esto se debe a que el select_tag que maneja las ciudades no se carga en la vista del formulario sino que se muestra ahí mediante ajax, como lo indicas en tu tuto. Mi pregunta es la siguiente, sabes cómo obtener id de la ciudad, teniendo en cuenta que el select_tag de ciudad se llena en otra vista y se muestra en el… Leer mas »