Problema con Ajax
DesconectadoHola, he tratado de aprender Ajax, pero lo que mas asusta a juicio mio es la gran cantidad de codigo que se necesita para una funcion.
Por eso en base al ejercicio 16 de www.libroweb.es he modificado y factorizado el codigo inicial para comprimir lo mas que se pueda el ejemplo, llegando al codigo que comparto.
Problemas:
- Hasta ahora no lo he podido hechar andar, ya estoy bloqueado, no se por donde continuar.
- Si alguien me puede orientar, donde esta el error.
La idea es que al no seleccionar el primer combo, los demas combos queden:
Combo1: Selec ...
Combo2: ---
Combo3: ---
De antemano, muchas gracias.
Codigo de Archivos
*** ejemplo.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=UTF-8" />
<title>Ejercicio 17</title>
<script type="text/javascript">
var ajax = null;
function inicializa_xhr() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function cargaItem(item) {
var lista = document.getElementById("select"+(item-1));
var valor = lista.options[lista.selectedIndex].value;
if(!isNaN(valor)) {
ajax = inicializa_xhr();
if (ajax) {
ajax.onreadystatechange = muestraItem(item);
ajax.open("POST", "../datos/ej_select"+item+"XML.php?nocache=" + Math.random(), true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("select"+(item-1)+"=" + valor);
}
}
}
function muestraItem(item) {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var lista = document.getElementById("select"+item);
var documento_xml = ajax.responseXML;
var nodos = documento_xml.getElementsByTagName("xml_doc")[0];
var losNodos = nodos.getElementsByTagName("xml_node");
//lista.options.length = 0; // Borrar elementos anteriores
lista.options.length = losNodos.length; // Borrar elementos anteriores
for(i=0; i<losNodos.length; i++) { // Método 1: Crear elementos Option() y añadirlos a la lista
var codigo = losNodos[i].getElementsByTagName("codigo")[0].firstChild.nodeValue;
var nombre = losNodos[i].getElementsByTagName("nombre")[0].firstChild.nodeValue;
lista.options[i] = new Option(nombre, codigo);
}
}
}
}
</script>
</head>
<body>
<h1>Listas desplegables encadenadas</h1>
<form>
<label for="sel1">Tipo de Agua</label>
<select id="select1" onChange="cargaItem(2);">
<option value="0" selected> Selec ... </option>
<option value="1"> A. Fria </option>
<option value="2"> A. Cal. </option>
</select>
<br/><br/>
<label for="sel2">Material</label>
<select id="select2" onChange="cargaItem(3);">
<option value="000"> --- </option>
</select>
<br/><br/>
<label for="sel3">Diametro</label>
<select id="select3">
<option value="00000"> --- </option>
</select>
</form>
</body>
</html>
*** ej_select1XML.php ***
<?php
header("Content-Type: application/xml");
header("version: 1.0; encoding: UTF-8");
//$xmltipos["0"] = "Select...";
$xmltipos["1"] = "Item 1";
$xmltipos["2"] = "Item 2";
foreach(
$xmltipos as $codigo => $nombre) {
$elementos_xml[] = "<xml_node>\n<codigo>$codigo</codigo>\n<nombre>".$nombre."</nombre>\n</xml_node>";
}
echo
"<xml_doc>\n".implode("\n", $elementos_xml)."\n</xml_doc>"
?>*** ej_select2XML.php ***
<?php
header("Content-Type: application/xml");
$xmltipos["0"]["000"] = " --- ";
$xmltipos["1"]["000"] = "Selec...";
$xmltipos["1"]["101"] = "Item 1.1";
$xmltipos["1"]["102"] = "Item 1.2";
$xmltipos["2"]["000"] = "Selec...";
$xmltipos["2"]["201"] = "Item 2.1";
$xmltipos["2"]["202"] = "Item 2.2";
$tipo = trim($_POST["select1"]);
$losNodos = $xmltipos[$tipo];
foreach(
$losNodos as $codigo => $nombre) {
$elementos_xml[] = "<xml_node><codigo>$codigo</codigo><nombre>".$nombre."</nombre></xml_node>";
}
echo
"<xml_doc>\n".implode("\n", $elementos_xml)."</xml_doc>";
?>*** ej_select3XML.php ***
<?php
header("Content-Type: application/xml");
header("version: 1.0; encoding: UTF-8");
$xmltipos["000"]["00000"] = " --- ";
$xmltipos["101"]["00000"] = "Selec...";
$xmltipos["101"]["10101"] = "Item 1.1.1";
$xmltipos["101"]["10102"] = "Item 1.1.2";
$xmltipos["101"]["10103"] = "Item 1.1.3";
$xmltipos["101"]["10104"] = "Item 1.1.4";
$xmltipos["102"]["00000"] = "Selec...";
$xmltipos["102"]["10201"] = "Item 1.2.1";
$xmltipos["102"]["10202"] = "Item 1.2.2";
$xmltipos["102"]["10203"] = "Item 1.2.3";
$xmltipos["201"]["00000"] = "Selec...";
$xmltipos["201"]["20101"] = "Item 2.1.1";
$xmltipos["201"]["20102"] = "Item 2.1.2";
$xmltipos["201"]["20103"] = "Item 2.1.3";
$xmltipos["201"]["20104"] = "Item 2.1.4";
$xmltipos["202"]["00000"] = "Selec...";
$xmltipos["202"]["20201"] = "Item 2.2.1";
$xmltipos["202"]["20202"] = "Item 2.2.2";
$xmltipos["202"]["20203"] = "Item 2.2.3";
$xmltipos["202"]["20204"] = "Item 2.2.4";
$material = trim($_POST["select2"]);
$losNodos = $xmltipos[$material];
foreach(
$losNodos as $codigo => $nombre) {
$elementos_xml[] = "<xml_node><codigo>$codigo</codigo><nombre>".$nombre."</nombre></xml_node>";
}
echo
"<xml_doc>\n".implode("\n", $elementos_xml)."</xml_doc>";
?>- Inicie sesión o regístrese para enviar comentarios
- 670 lecturas
Lo mejor para debuggear ajax es utilizar el complemento firebug de firefox. Activa la consola y mira las respuestas. Sobre como enviar las respuestas para mí lo más optimo es json.
http://es.wikipedia.org/wiki/JSON
https://addons.mozilla.org/es-ES/firefox/addon/1843/
http://www.w3schools.com/ajax/default.asp
suerte :)
he utilizado el complemento firebug de firefox, el problema es que la primera funcion cargarItem la ejecuta y el post devuelve el XML, pero en la funcion mostrarItem aparece un error 0, el cual indica que ajax no ha sido inicializado.
El problema es que ya he revisado un monton de veces el archivo y no encuentro el error.
El bloqueo ha sido mayor a lo esperado.
Saludos y gracias.
si devuelve el XML es que la llamada ajax ha sido realizada correctamente, ¿puedes subirlo a algún sitio para verlo mejor?
No tengo donde subirlos, por eso envie el codigo fuente de todos los archivos en la primera consulta.
Saludos