Edición de «Listas simples enlazadas jquery»

{{cleanupbox
|image=[[Archivo:Information_icon4.png|45px]]
|texto ='''Este Artículo cumple con todos los quererimientos de los Kumbieros.'''<br />
}}

== Listas Enlazadas de tres niveles ==
Para nuestro ejemplos vamos a utilizar listas simples [http://es.wikipedia.org/wiki/Lista_(inform%C3%A1tica)#Listas_simples_enlazadas] 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 

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

=== Tablas ===

<source lang=mysql>
#
# 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');
</source>

=== 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, provesionales, auxiliares, pacientes, etc..', la base siempre es la misma


<source lang=php>
<?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'));
	}
}
?>
</source>

* Modelo Regiones

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

* Modelo Comunas

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

* Modelo Ciudades

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

* Vista create.phtml

<source lang=php>

<?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>
</source>


* Vista getComunas.phtml

<source lang=php>
<?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>
</source>

* Vista getCiudades.phtml

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

* 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.

'''$.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: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_galeria_img.zip 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.

[[Categoría:Tutoriales KumbiaPHP]]
[[Categoría:jQuery]]