Que tal amigos estoy tratando de trabajar con
5 listas dependientes con ajax, json, php y mysql.........
He utilizado como base un codigo de ajax de
http://www.librosweb.es/ajax/capitulo8.html .
Trabajando con este codigo con 3 listas funciona muy bien, pero al momento de trabajar con 4 listas no carga el cuarto combo, ojala me pueda echar un ojo y ver que estoy haciendo mal...
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/hoja.css">
<title>Listas Desplegables Dinámicas</title>
<script language="javascript" type="text/javascript">
//1.----INSTANCIAR REQUEST---------------------------------------
function inicializa_xhr() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
//2.-FUNCION PARA MOSTRAR REGIONES------------------------------
function muestraRegiones() {
if (peticion.readyState == 4) {
if (peticion.status == 200) {
var lista = document.getElementById("region");
var regiones = eval('(' + peticion.responseText + ')');
lista.options[0] = new Option("- region -");
var i=1;
for(var codigo in regiones) {
lista.options[i] = new Option(regiones[codigo], codigo);
i++;
}
}
}
}
//5.-FUNCION PARA CARGAR PROVINCIAS----------------------------------
function cargaProvincias() {
var lista = document.getElementById("region");
var region = lista.options[lista.selectedIndex].value;
if(!isNaN(region)) {
peticion = inicializa_xhr();
if (peticion) {
peticion.onreadystatechange = muestraProvincias;
peticion.open("POST", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_provinciasJSON.php?nocache=" + Math.random(), true);
peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion.send("region=" + region);
}
}
}
//4.-FUNCION PARA MOSTRAR PROVINCIAS--------------------------------
function muestraProvincias() {
if (peticion.readyState == 4) {
if (peticion.status == 200) {
var lista = document.getElementById("provincia");
var provincias = eval('(' + peticion.responseText + ')');
lista.options.length = 0;
var i=0;
for(var codigo in provincias) {
lista.options[i] = new Option(provincias[codigo], codigo);
i++;
}
}
}
}
//7.--FUNCION PARA CARGAR CIUDADES EN COMBO
function cargaCiudades() {
var lista = document.getElementById("provincia");
var provincia = lista.options[lista.selectedIndex].value;
if(!isNaN(provincia)) {
peticion = inicializa_xhr();
if (peticion) {
peticion.onreadystatechange = muestraCiudades;
peticion.open("POST", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_ciudadesJSON.php?nocache=" + Math.random(), true);
peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion.send("provincia=" + provincia);
}
}
}
//6.--FUNCION PARA MOSTRAR CIUDADES
function muestraCiudades() {
if (peticion.readyState == 4) {
if (peticion.status == 200) {
var lista = document.getElementById("ciudad");
var ciudades = eval('(' + peticion.responseText + ')');
lista.options.length = 0;
var i=0;
for(var codigo in ciudades) {
lista.options[i] = new Option(ciudades[codigo], codigo);
i++;
}
}
}
}
//9.- CARGAR SERVICIOS-----------------------------------------------
function cargaServicios() {
var lista = document.getElementById("ciudad");
var ciudad = lista.options[lista.selectedIndex].value;
alert(ciudad);
if(!isNaN(ciudad)) {
peticion = inicializa_xhr();
if (peticion) {
peticion.onreadystatechange = muestraServicios;
peticion.open("POST", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_serviciosJSON.php?nocache=" + Math.random(), true);
peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion.send("ciudad=" + ciudad);
}
}
}
//8.- MOSTRAR SERVICIOS--------------------------------------------
function muestraServicios() {
if (peticion.readyState == 4) {
if (peticion.status == 200) {
var lista = document.getElementById("servicio");
var servicios = eval('(' + peticion.responseText + ')');
lista.options.length = 0;
var i=0;
for(var codigo in servicios) {
lista.options[i] = new Option(servicios[codigo], codigo);
i++;
}
}
}
}
//3.-PRINCIPAL LLAMADAS A ONLOAD-------------------------------------
window.onload = function() {
peticion = inicializa_xhr();
if(peticion) {
peticion.onreadystatechange = muestraRegiones;
peticion.open("GET", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_regionesJSON.php?nocache="+Math.random(), true);
peticion.send(null);
}
document.getElementById("region").onchange = cargaProvincias;
document.getElementById("provincia").onchange = cargaCiudades;
document.getElementById("ciudad").onchange = cargaServicios;
}
</script>
</head>
<body>
<form>
<!--<label for="region">Region</label>!-->
<select id="region">
<option>Cargando...</option>
</select>
<br/><br/>
<!--<label for="provincia">Provincia</label>!-->
<select id="provincia">
<option>- provincia -</option>
</select>
<br /><br />
<select id="ciudad">
<option>- ciudad -</option>
</select>
<br /><br />
<select id="servicio">
<option>- servicio -</option>
</select>
</form>
</body>
</html> el codigo php lo he probado y manda bien el array respectivo para su tratamiento a traves de JSON en el codigo AJAX...
Gracias por su ayuda...