Select Combinado con XAJAX - PHP

betodaniel61 · #1 (**permalink**) 06/07/2010, 14:36

Buens Tardes:
Estoy desarrollando un select combinado en la cual selecciono una provincia y dependiendo de eso cambio la segudna select de poblacion, el problema es que tomando la provincia que sea no funciona la parte de la segunda select.
Soy nuevo en esto, no se que es lo que estoy haciendo mal, le agradecería a alguien si me puede ayudar:
Les paso el codigo:

<?
require ('../includes/xajax/xajax_core/xajax.inc.php');
$xajax = new xajax();
$xajax->configure('javascript URI', '../includes/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_sel ect);
//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->processRequest();
?>

<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("../includes/xajax/xajax_core/");
$xajax->printJavascript();
?>
</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>

Muchas Gracias

xziolhvinvhgl · #2 (**permalink**) 07/07/2010, 11:22

hola betodaniel61. ps yo resolvi esto hace tiempo cuando estuve en tus zapatos...

primero tengo en un script el objeto XMLHTTPRequest(); que seria algo coo esto:
function XMLHttp()
{
var Object;

if(typeof XMLHttpRequest == "undefined")
{
if(navigator.userAgent.indexOf("MSIE 5") >=0)
{
Object = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
Object = new ActiveXObject("Msxml2.XMLHTTP");
}
}
else
{
Object = new XMLHttpRequest();
}

return Object;
}

luego incluyo este codigo javascript en la pagina donde tengo los select, como por ejemplo
<script type='text/javascript' src='objetoAjax.js'></scritp>

ahora... en esa misma pagina si gustas puedes colocar esta funcion, la cual envia el cod de un Estado a una pagina de busqueda y ésta a su vez envia una respuesta de todos los municipios pertenecientes a ese Estado...

function pasaEst(valor){
var mun = document.getElementById("municipios");
var obj = new XMLHttp();
obj.open("POST","busMunicipios.php",true);
obj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
obj.send("estado="+valor);

obj.onreadystatechange=function(){
if((obj.readyState == 4) && (obj.status == 200)){
var resp = obj.responseText;
var vector1 = resp.split(';');
cant = vector1.length - 1;
mun.length = 0;
var sinSelect = document.createElement('option');
sinSelect.value = '-1';
sinSelect.innerHTML = 'Sin Selección';
mun.appendChild(sinSelect);
for(i=0; i<=(cant)-1; i++){
var vector2 = vector1[i].split(',');
var opcion = document.createElement('option');
opcion.value = vector2[0];
opcion.innerHTML = vector2[1];
mun.appendChild(opcion);
}
}
}
}

esta funcion se debe ejecutar en el evento "onChange" del select "Estado"
algo como esto
<select name='estados' id='estados' onChange='pasaEst(this.value)'>
....estados...
</select>

y por ultimo tengo el script .php donde busco los municipios el cual seria este...

<?php

include("conexion.php");

$estado = $_POST['estado'];
$bus = mysql_query("SELECT * FROM municipios WHERE id_estado = '$estado'",$link);
while($row = mysql_fetch_row($bus)){
echo $row[0].','.$row[1].';';
}

?>

mi tabla municipios simplemente tiene el codigo del municipio, el nombre y la clave foranea del estado al cual pertenece.... en este caso recibo la variable "estado" que paso por el metodo "POST" con la funcion pasaEst de javascript... y como solo necesito el codigo del municipio y su nombre pues realizo un Array con donde concateno estod datos por una coma (,) y al final del registro, por un punto y coma (;)...esto es para luego poder separarlos en la funcion y crear los arreglos necesarios para ingresar estos datos en el segundo select donde estaran los municipios.....

bueno espero te sirva de ayuda.....
PD: este codigo está propabo...incluso ahora mismo lo usoen un sistema que tengo

betodaniel61 · #3 (**permalink**) 09/07/2010, 12:18

Muchas Gracias Amigo, lo voy a probar

Tati_C · #4 (**permalink**) 04/08/2010, 09:06

mi pregunta va enfocada a que yo tengo 3 combos..
escojo el primero...envio mi peticion en el onclick del select del combo..
<select name="select" id="select" onclick="xajax_prueba1(select[selectedIndex].value);return false;">

De manera correcta se carga el segundo combo con xajax
ahora escojo algun item de este el segundo combo, asi:
<div id='id2'>
<select name="provincia_menu" id="provincia_menu" onclick= "xajax_prueba2(provincia_menu[selectedIndex].value);return false;">
<option value="0">ingrese</option>
</select>
</div>

pero no se me carga el el tercer combo :(

<div id='id3'>
<select name="canton_menu" id="canton_menu">
<option value="0">ingrese</option>
</select>

</div>

si notan tengo dos funciones de xajax..prueba1 y prueba2

pero como que a la segunda prueba 2 no le toma en cuenta...

Si hay como llamar a dos funciones diferentes con xajax????

aqui les pongo el codigo de mis funciones de xajax..

require_once ("xajax/xajax.inc.php");
$xajax= new xajax();
$xajax->registerFunction("prueba1");
$xajax->registerFunction("prueba2");

function prueba1($var1)
{
$objet_respuesta = new xajaxResponse();
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "prueba";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
$sql=mysql_query("SELECT * FROM provincia where id_pais_fk =".$var1,$con);
$nuevo_select = "<select name='provincia_menu'>";
while ($row = mysql_fetch_array($sql))
{
$nuevo_select .= '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
$nuevo_select .= "</select>";
$objet_respuesta ->addAssign("id2","innerHTML",$nuevo_select);
return $objet_respuesta;

}

function prueba2($var2)
{
$objet_respuesta1 = new xajaxResponse();
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ff";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
$sql=mysql_query("SELECT * FROM canton where id_provincia =".$var2,$con);
$nuevo_selected = "<select name='canton_menu'>";
while ($row = mysql_fetch_array($sql))
{
echo $nuevo_selected .= '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
$nuevo_select .= "</select>";
$objet_respuesta1 ->addAssign("id3","innerHTML",$nuevo_selected);
return $objet_respuesta1;

}

$xajax->processRequests();?>

por favor ayudenme...