Listas simples enlazadas jquery

{{#if: |}}

{{#if:

|}}

Este Artículo cumple con todos los quererimientos de los Kumbieros.

{{{imageright}}}

Listas Enlazadas de tres niveles

Para nuestro ejemplos vamos a utilizar listas simples [1] con 3 niveles, Regiones, Comunas y Ciudades.

Requerimientos

• Cambiar autocarga de los modelos

Editamos el archivo config.ini y modificamos models_autoload = On por models_autoload = Off

• incluir libreria jquery

Editamos el template activo y adicionamos esta linea

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Tablas

#
# Table structure for table 'regiones'
#
# DROP TABLE IF EXISTS regiones;
CREATE TABLE `regiones` (
  `id` int(4) NOT NULL auto_increment,
  `nombre` varchar(100) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

#
# Dumping data for table 'regiones'
#

INSERT INTO regiones VALUES (1,'Primera Region');
INSERT INTO regiones VALUES (3,'Tercera Region');
INSERT INTO regiones VALUES (2,'Segunda Region');

#
# Table structure for table 'comunas'
#

# DROP TABLE IF EXISTS comunas;
CREATE TABLE `comunas` (
  `id` int(4) NOT NULL auto_increment,
  `regiones_id` int(4) NOT NULL,
  `nombre` varchar(100) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

#
# Dumping data for table 'comunas'
#

INSERT INTO comunas VALUES (4,3,'Primera Comuna');
INSERT INTO comunas VALUES (3,2,'Primera Comuna');
INSERT INTO comunas VALUES (2,1,'Segunda Comuna');
INSERT INTO comunas VALUES (1,1,'Primera Comuna');

#
# Table structure for table 'ciudades'
#

# DROP TABLE IF EXISTS ciudades;
CREATE TABLE `ciudades` (
  `id` int(4) NOT NULL auto_increment,
  `comunas_id` int(4) NOT NULL,
  `nombre` varchar(100) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

#
# Dumping data for table 'ciudades'
#

INSERT INTO ciudades VALUES (6,3,'Tercera Ciudad');
INSERT INTO ciudades VALUES (5,3,'Segunda Ciudad');
INSERT INTO ciudades VALUES (4,3,'Primera Ciudad');
INSERT INTO ciudades VALUES (3,2,'Segunda Ciudad');
INSERT INTO ciudades VALUES (2,2,'Primera Ciudad');
INSERT INTO ciudades VALUES (1,1,'Primera Ciudad');

Ejemplo

• clientes_controller.php

Vamos a trabajar con un controller llamado clientes, acá solo mostrareos los 3 niveles de las listas, nada más, es decir, no vamos a trabajar con el modelo clientes ya que puede ser 'usuarios, proveedores, profesionales, auxiliares, pacientes, etc..', la base siempre es la misma

<?php
/**
 * Carga de Modelos
 */
Load::models('regiones','comunas','ciudades');
class ClientesController extends ApplicationController{
	public function index() {

	}
	public function create(){
		$regiones = new Regiones();
		$this->regiones = $regiones->buscar();
		if($this->has_post('clientes')){
			//SUBMIT
		}
	}
	public function getComunas(){
		$this->set_response('view');
		$comunas = new Comunas();
		$this->comunas = $comunas->buscar($this->post('regiones_id'));
	}
	 
	public function getCiudades(){
		$this->set_response('view');
		$ciudades = new Ciudades();
		$this->ciudades = $ciudades->buscar($this->post('comunas_id'));
	}
}
?>

• Modelo Regiones

<?php 
class Regiones extends ActiveRecord{
  public function buscar(){
    return $this->find('order: nombre');
  }
}
?>

• Modelo Comunas

<?php 
class Comunas extends ActiveRecord{
  public function buscar($regiones_id){
    return $this->find("regiones_id = $regiones_id", 'order: nombre');
  }
}
?>

• Modelo Ciudades

<?php 
class Ciudades extends ActiveRecord{
  public function buscar($comunas_id){
    return $this->find("comunas_id = $comunas_id", 'order: nombre');
  }
}
?>

• Vista create.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>
	</tr>
	<tr>
		<th>Ciudad</th>
		<td><div id='div_ciudades'></div></td>
	</tr>	
	<tr>
		<td colspan="2" align="center"><?php echo submit_tag('Agregar')?></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);
          }
        });
});
</script>

• Vista getComunas.phtml

<?php
	echo select_tag(array("clientes.comunas_id", $comunas, 'option' => 'nombre', 'include_blank'=> 'Seleccione...'));
?>		

<script type='text/javascript'>
$("#clientes_comunas_id").change(function(){
	var comunas_id 	=	$('#clientes_comunas_id').val();
        $.ajax({
          type: "POST",
          url: "<?php echo PUBLIC_PATH . 'clientes/getCiudades/'; ?>",
          data: "comunas_id=" + comunas_id,
          success: function(html){
            $("#div_ciudades").html(html);
          }
        });
});
</script>

• Vista getCiudades.phtml

<?php
	echo select_tag(array('clientes.ciudades_id', $ciudades, 'option'=> 'nombre', 'include_blank'=>'Seleccione...'));
?>

• Parametros del codigo Ajax:

$() (La funcion jQuery): Es la función principal de jQuery, que además tiene diversas utilidades según los parámetros que se le envíen. Su utilidad principal es obtener elementos de la página. Escribir $() es igual como que escribir jquery().

$.ajax(): Es el metodo principal para realizar peticiones AJAX.

type: El tipo de petición que se realiza. Su valor por defecto es GET, aunque también se puede utilizar el método POST.

url: La URL del servidor a la que se realiza la petición.

data: Información que se incluye en la petición. Se utiliza para enviar parámetros al servidor. Si es una cadena de texto, se envía tal cual, por lo que su formato debería ser parametro1=valor1&parametro2=valor2. También se puede indicar un array asociativo de pares clave/valor que se convierten automáticamente en una cadena tipo query string.

success: Permite establecer la función que se ejecuta cuando una petición se ha completado de forma correcta. La función recibe como primer parámetro los datos recibidos del servidor, previamente formateados según se especifique en la opción dataType.

Descarga

Descarga ejemplo: app_listas_enlazadas.zip para el core del beta1 de Spirit v1.0

Coloca esta carpeta dentro de kumbiaphp y ejecuta la direccion: http://localhost/mi_ruta_de_kumbiaphp_framework_aqui/app_listas_enlazadas/clientes/create/ para ver el ejemplo de esta practica. Recuerda indicar en la carpeta config/databases.ini el nombre de tu base de datos, usuario y clave. Si tienes algun problema con esta practica, puedes pasar por el IRC de KumbiaPHP, el Foro o la Listmail, siempre habran personas dispuestas a ayudarte.