La función anterior tiene poco de interés para lo que es el manejo de Ajax. Aquí hemos creado unos arrays para almacenar las poblaciones de las distintas provincias, pero en nuestras aplicaciones posiblemente tengamos las poblaciones en una base de datos. En ese caso lo que tendríamos que hacer es simplemente es una consulta y recorrer un conjunto de registros.
En definitiva, la función recibe un identificador de provincia, que se utiliza para recorrer el array asociado a la provincia y generar un campo select con una opción por cada población.
Ahora vamos a ver la función que hace uso de xajax para procesar y actualizar la página con Ajax para cambiar las opciones del segundo select.
function generar_select($cod_provincia){
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse('ISO-8859-1');
if ($cod_provincia==999){
//escribimos el select de poblaciones vacío
$nuevo_select = '<select name="poblaciones">
<option value=0>Elegir provincia</option>
</select>
';
}else{
$nuevo_select = select_combinado($cod_provincia);
}
//escribimos en la capa con id="seleccombinado"
$respuesta->addAssign("seleccombinado","innerHTML",$nuevo_select);
//tenemos que devolver la instancia del objeto xajaxResponse
return $respuesta;
}
Lo primero es instanciar un objeto de la clase xajaxResponse para generar la respuesta. Como se puede ver, recibimos el código de la provincia como parámetro. Comprobamos si ese código de la provincia es 999, porque es un caso especial (no se ha seleccionado ninguna provincia) y tenemos que generar el select de provincias vacío. En caso que el código de la provincia sea otra cosa entonces se lo pasamos a la función select_combinado(), vista anteriormente, para generar el select con las poblaciones de la provincia dada.
Para acabar, escribimos en la capa con id="selectcombinado" la cadena con el select que hemos generado. Para escribirlo utilizamos el método addAssign() del objeto de la clase xajaxResponse que ya conocíamos de anteriores ejercicios.
El código completo es el siguiente:
<?
//incluímos la clase ajax
require ('xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();
function select_combinado($id_provincia){
//función para crear el select combinado
//debe extraer las opciones de un select a partir de un parámetro
//generamos unos arrays con distintas poblaciones de varias provincias
//estos valores en un caso práctico seguramente se extraerán de base de datos
//no habría que cargar todos en memoria, sólo hacer el select de las poblaciones de la provincia deseada
$madrid = array("Madrid", "Las Rozas", "Móstoles", "San Sebastián de los Reyes");
$valencia = array("Valencia", "La Eliana", "Paterna", "Cullera");
$barcelona = array("Barcelona", "Badalona");
$leon = array ("León", "Astorga", "Villamejil");
$poblaciones = array($madrid, $valencia, $barcelona, $leon);
//creo las distintas opciones del select
$nuevo_select = "<select name='poblaciones'>";
for ($i=0; $i<count($poblaciones[$id_provincia]); $i++){
//for ($i=0; $i<2; $i++){
$nuevo_select .= '<option value="' . $i . '">' . $poblaciones[$id_provincia][$i] . '</option>';
}
$nuevo_select .= "</select>";
return $nuevo_select;
}
function generar_select($cod_provincia){
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse('ISO-8859-1');
if ($cod_provincia==999){
//escribimos el select de poblaciones vacío
$nuevo_select = '<select name="poblaciones">
<option value=0>Elegir provincia</option>
</select>
';
}else{
$nuevo_select = select_combinado($cod_provincia);
}
//escribimos en la capa con id="seleccombinado"
$respuesta->addAssign("seleccombinado","innerHTML",$nuevo_select);
//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("generar_select");
//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/
/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Validar usuario en Ajax</title>
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("xajax/");
?>
</head>
<body>
<form name="formulario">
Provincia:
<br>
<select name="provincia" onchange="xajax_generar_select(document.formulario.provincia.
options[document.formulario.provincia.selectedIndex].value)">
<option value="999">Selecciona provincia</option>
<option value=0>Madrid</option>
<option value=1>Valencia</option>
<option value=2>Barcelona</option>
<option value=3>León</option>
</select>
<br>
<br>
Población: <div id="seleccombinado">
<select name="poblaciones">
<option value=0>Elegir provincia</option>
</select>
</div>
</form>
</body>
</html>
http://www.desadolloweb.com
Usuarios que han visto este tema también han visto...
- Acceder a MySQL 4.1 o superior con PHP
- Funciones en PHP
- Leer un archivo de texto con PHP
- Introducción al PHP y a las librerías
- Contador de Visitas Básico con PHP
- Versión imprimible de este documento
- Enviar por e-mail este documento
