Listas enlazadas con jQuery en KumbiaPHP

Al crear nuestros formularios de entrada de datos es habitual encontrar casos en los que necesitamos que una lista desplegable se rellene con unos determinados valores, los cuáles dependen del valor seleccionado en otra lista. Para evitar tener que cargar todos los valores posibles de una vez, o molestar al usuario con recargas de página para actualizar las listas con sus valores correspondientes, podemos recurrir al uso de AJAX. Para facilitar al máximo la tarea lo más recomendable es usar una librería como jQuery.

En la Wiki de KumbiaPHP tenemos un muy buen ejemplo sobre el uso de listas enlazadas con jQuery para la inserción de nuevos registros en la base de datos.

En este artículo aprovecharemos el citado ejemplo y veremos como adaptarlo para que el mismo sistema de listas enlazadas con jQuery nos sirva a la hora de editar un registro existente.

En primer lugar añadiremos el método edit en nuestro controlador: clientes_controller.php.

public function edit($id = null)
{
  if ($id)
    $this->clientes = $this->Clientes->find($id);

  if ($this->has_post('clientes'))
  {
    if (!$this->Clientes->update($this->post('clientes')))
    {
      Flash:error('Fallo Operación');
      $this->clientes = $this->post('clientes');
    } else {
      Router::route_to('action: index');
    }
  }
}

A continuación añadiremos algo de código a los métodos getComunas y getCiudades del controlador: clientes_controller.php.

public function getComunas(){
  $this->set_response('view');
  $comunas = new Comunas();
  $this->comunas = $comunas->buscar($this->post('regiones_id'));

  if ($this->has_post('comunas_id'))
    $this->clientes->comunas_id = $this->post('comunas_id');
}

public function getCiudades(){
  $this->set_response('view');
  $ciudades = new Ciudades();
  $this->ciudades = $ciudades->buscar($this->post('comunas_id'));

  if ($this->has_post('ciudades_id'))
    $this->clientes->ciudades_id = $this->post('ciudades_id');
}

Con las líneas que hemos añadido podremos saber no sólo que valores deberá tener la lista sino también cuál de esos valores deberá estar seleccionado. Para completar esta funcionalidad crearemos la vista: edit.phtml.

<?php View::content(); ?>
<?php echo form_tag("$controller_name/$action_name"); ?>
<table id='table_forms'>
	<tr>
		<th>Región</th>
		<td>
		<?php echo select_tag(array('clientes.regiones_id', $regiones, 'option' => 'nombre', 'include_blank' => 'Seleccione...')); ?>
		</td>
	</tr>
	<tr>
		<th>Comuna</th>
		<td><div id='div_comunas'></div></td><td>
	</td></tr>
	<tr>
		<th>Ciudad</th>
		<td><div id='div_ciudades'></div></td>
	</tr>
	<tr>
		<?php echo hidden_field_tag(array('clientes.id')) ?>
		<td colspan="2" align="center"><?php echo submit_tag('Actualizar')?></td>
	</tr>
</table>
<?php echo end_form_tag(); ?>

<script type='text/javascript'>
$("#clientes_regiones_id").change(function(){
    var regiones_id = $('#clientes_regiones_id').val();
    $.ajax({
        type: "POST",
        url: "<?php echo PUBLIC_PATH . 'clientes/getComunas/'; ?>",
        data: "regiones_id=" + regiones_id,
        success: function(html){
            $("#div_comunas").html(html);
        }
    });
});
$(window).load(function(){
    var regiones_id = "<?php echo $clientes->regiones_id ?>";
    var comunas_id = "<?php echo $clientes->comunas_id ?>";
    $.ajax({
        type: "POST",
        url: "<?php echo PUBLIC_PATH . 'clientes/getComunas/'; ?>",
        data: "regiones_id=" + regiones_id + "&comunas_id=" + comunas_id,
        success: function(html){
            $("#div_comunas").html(html);
        }
    });
});
$(window).load(function(){
    var comunas_id = "<?php echo $clientes->comunas_id ?>";
    var ciudades_id = "<?php echo $clientes->ciudades_id ?>";
    $.ajax({
        type: "POST",
        url: "<?php echo PUBLIC_PATH . 'clientes/getCiudades/'; ?>",
        data: "comunas_id=" + comunas_id + "&ciudades_id=" + ciudades_id,
        success: function(html){
            $("#div_ciudades").html(html);
        }
    });
});
</script>

Como puedes ver, es bastante parecida a la vista que utilizamos para crear un nuevo registro, sólo que en este caso hemos añadido más código para que en el momento en que se carga la página se rellenen todas las listas desplegables con los valores que corresponden y con el valor correctamente seleccionado. Fíjate especialmente en las líneas resaltadas para entender mejor su funcionamiento.

Espero que te sea de utilidad.