Weblogs Código

RecorteX

73 usuarios y 244 recortes de código
Usuario

Contraseña
Crear cuenta
asp csharp css fechas Flash html imagenes java javascript linux mysql oracle php sql SQLServer url vbnet web xhtml xml
Top Usuarios
fjmp76 (43)
albin (31)
josuebasurto (31)
juanjo (30)
pedrocaro (9)
stanz (8)
AndiXTRM (7)
Joserra (7)
miiglesi (6)
aplyca (5)
Top Etiquetas
php (38)
vbnet (28)
csharp (26)
javascript (26)
html (25)
java (24)
sql (18)
xml (13)
mysql (13)
css (10)
Flash (7)
imagenes (7)
xhtml (7)
linux (6)
asp (6)
fechas (6)
web (5)
SQLServer (5)
oracle (5)
url (5)

Cargar combos con Ajax

No se uds. pero antes hacer combos que se cargaran donde uno dependia de otro era algo engorroso, claro que habia varios metodos, se podia usar iframes o recargar la pagina, aunque sinceramente ninguno de esos me parece muy bueno, hace poco necesite hacer algo asi para una web app, asi que le digo como lo hice, no se si sera lo mejor pero talvez a alguien le sirva.

Por si acaso esto esta hecho con PHP y MySQL

Primero tenemos nuestro formulario

Esas dos son clases donde la primera permite manejar la Base de datos, esa clase la postee hace un tiempo aqui.( http://www.recortex.com/recorte/177 )
Todo lo que viene a continuacion esta dentro de un solo archivo formulario.php

 
<?php 	
        include("./cls/clsManejaBD.php"); 
	include("./cls/clsUbicacion.php"); 
?>
 
 
<form action="./actions/registrar_evento.php" method="post" id="frmRegistraEvento">
<fieldset><label>Departamento</label>
         <?php /*instancio la clase y llamo a un metodo de la misma que va a generar la lista de departamentos*/ 
               $u=new Ubicacion(); $u->Generar_Combo_Departamentos(); 
         ?>
</fieldset>
<fieldset><label>Provincia</label><div id="cmbProvincia">Provincia</div></fieldset>
<fieldset><label>Distrito</label><div id="cmbDistrito">Distrito</div></fieldset>
<fieldset><label>Fecha</label><input type="text" name="txtFecha" value="dd/mm/aaaa" size="10" maxlength="10"/></fieldset>
<fieldset><label>Tema</label><input type="text" name="txtTema" value="tema tratado"/></fieldset>
<fieldset><label>Publico</label><input type="text" name="txtPublico" value="publico atendido"/></fieldset>
<fieldset><label>Lugar</label><input type="text" name="txtLugares" value="lugar"/></fieldset>
<fieldset><label>Cantidad</label><input type="text" name="txtCantidad" value="0"/></fieldset>
<fieldset><label>N&deg; de Informe</label><input type="text" name="txtInforme" value="N&deg; de Informe" /></fieldset>
<fieldset><label>Fecha de Informe</label><input type="text" name="txtFecha_Informe" value="dd/mm/aaaa" size="10" maxlength="10"/></fieldset>
<fieldset><input type="button" name="aceptar" value="aceptar"/> <input type="button" name="borrar" value="borrar"/></fieldset>
</form>
 

Cuando se vea esta pagina el navegador reemplazara donde aparece nuestro codigo php por esto

 
<select id="departamento" onchange="cambio(id,2);">
<option> Amazonas</option>
<option> Ancash </option>
<option> Arequipa </option>
...
</select>
 

ahora viene la parte de javascript, yo tengo una funcion denominada cambio() dentro de la cual valido el destino y que pagina cargar, lo que sigue pueden ponerlo en la misma pagina o en un archivo js aparte

 
function cambio(id, dest)
{	var index=document.getElementById(id).selectedIndex;
	var url;
	var detino;
       /*de acuerdo al combo que cambie carga el dato del siguiente combo
combo "departamento" carga "provincias" y "provincias" carga "distritos" */
	if(dest==2)
		{ 
			url="cargar_provincias.php?idDep=" + (index+1); /*a la variable se le suma 1 ya que el indice del combo empieza en 0*/
			destino='cmbProvincia';
		}
		
	if(dest==3)
		{ 	url="cargar_distritos.php?idProv=" + (index+1) + "&idDep=" + (document.getElementById('departamento').selectedIndex + 1);
			destino='cmbDistrito';
		}
		
	cargarDatos(url, "action", destino);//esta es una funcion que llama al ajax
}
 

Bueno aunque yo tengo separado en archivos diferentes en este caso vamos a decir que tanto la funcion de arriba como la funcion para ajax se encuentra en el mismo archivo

 
function cargarDatos(pagina, dir, target)	
{	var page = false;
	var target;
	var url;
	url="./" + dir + "/" + pagina;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        page = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try 
        {
            page = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versi&oacute;n antigua
            try
            {
                page = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    } 
    else
	{	return false;}
	
    page.onreadystatechange = function ()
    {
        // funci&oacute;n de respuesta
		if (page.readyState != 4) {
			document.getElementById (target).innerHTML= '<div id="loader"><img src="./img/ajax-loaderC.gif" > Cargando datos...</div>';
		}else{
			//window.setTimeout("cargarpagina(page);",2000); //pretendemos demorar la respuesta unos segundos
			cargarpagina(page, target);
		} 		
    }
	
    page.open ('GET', url, true); // asignamos los m&eacute;todos open y send
    page.send (null);	
 
}
 
function cargarpagina(page, target)
{
    if (page.readyState == 4 && (page.status == 200 || window.location.href.indexOf ("http") == - 1))
		document.getElementById (target).innerHTML = page.responseText;
}
 

por ultimo debemos tener nuestros archivos php, yo los tengo en una carpeta llamada “action”
aqui le muestro el que carga los distritos para que se den una idea

 
<?php
	include("../cls/clsManejaBD.php"); 
	include("../cls/clsUbicacion.php"); 
	$id_departamento=$_GET['idDep'];
	$id_Provincia=$_GET['idProv'];
	$u=new Ubicacion(); $u->Generar_Combo_Distritos($id_departamento,$id_Provincia);
?>
 

por ultimo no se uds. pero a veces me ha pasado a mi que en tutoriales como estos no ponen el codigo completo php y uno se pierde, asi que aqui les pongo el codigo de la clase Ubicacion.

getSQL($query);		
		return $rs;
	}
	
	function Generar_Combo_Departamentos()
	{ $rs=$this->ListarDepartamentos();
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='departamento' onchange='cambio(id,2);'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}
	
	function ListarProvincias($fk_departamento)
	{	
		$dbm=new ManejaBD;
		$query="SELECT idProvincia, nombre FROM Provincia where fk_Departamento=$fk_departamento";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	function Generar_Combo_Provincias($idDepartamento)
	{ $rs=$this->ListarProvincias($idDepartamento);
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='provincia' onchange='cambio(id,3);'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}
	
	function ListarDistritos($fk_departamento, $fk_provincia)
	{	
		$dbm=new ManejaBD;
		$query="SELECT DISTINCT idDistrito, nombre FROM Distrito where fk_Departamento=$fk_departamento and fk_Provincia=$fk_provincia";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	function Generar_Combo_Distritos($idDepartamento, $idProvincia)
	{ $rs=$this->ListarDistritos($idDepartamento, $idProvincia);
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='distrito'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}

	
	function Ubicacion_Evento($idEvento)
	{	
		$dbm=new ManejaBD;
		$query="SELECT direccion FROM Ubicacion where fk_Evento=$idEvento";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	
}

A pedido de un usuario ahi esta cargar_distritos.php

 
 
	include("../cls/clsManejaBD.php"); 
	include("../cls/clsUbicacion.php"); 
	$id_departamento=$_GET['idDep'];
	$id_Provincia=$_GET['idProv'];
	$u=new Ubicacion(); $u->Generar_Combo_Distritos($id_departamento,$id_Provincia);
 

aunque un poco largo espero sea entendible _

Comentario de pamr22:

Esta interesante, he estado buscando en varios lugares y no he encontrado algo tan claro. FELICITACIONES!!!

Si sería para un cuarto combo, por ejemplo Tienda con id_tien y desc_tien, que adicionaría.

Gracias por su respuesta.

Comentario de pamr22:

Otra preguntita, donde está cargar_provincias.php? y cargar_distritos.php? ojala lo puedan colgar

Gracias.

Comentario de AndiXTRM:

Disculpa Pamr22 la demora, bueno la lógica es esta:
por lo general cuando hacias un onchange en un control “combobox” mandabas toda la url agregando ?parametro=dato en metodo get a recargar toda la pagina, algo similar es ajax a diferencia q ahora lo haces en una parte de la pagina y va al servidor con esa direccion modificada luego recoge los datos.
Para ser puntual a tu pregunta, si tienes un cuarto combo en mi funcion cambia(id, dest) agregas otro if para validar donde debe cargar el resultado o si prefieres hazlo con una sentencia switch()
Tambien voy a subir cargar_provincias.php y cargar_distritos.php
El arbol de archivos es algo asi:
\ \js \actions – cargar_provincias.php – cargar_distritos.php \cls – clsUbicacion – clsManejaBD
index.php

Comentario de wchucks:

Hola. AndiXTRM
Sólo quería agradecer el tutorial, porque me ha sido de tremenda ayuda. Gente como tú es la que hace grande internet ;)

Un saludo!

Identifícate para dejar un comentario.
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin