AJAX - Enlazar dos combos mediante ajax.

   
Vista:

Enlazar dos combos mediante ajax.

Publicado por Ricardo (1 intervención) el 20/08/2012 19:31:14
Buenas,

Tengo un problema al enlazar un par de combos mediante ajax. Creo que está todo bien, pero no termina de funcionar.
Os paso los fuentes a ver si vosotros podéis ver en qué meto la pata...

Index:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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" />
<title>Ejercicio 16 - Listas desplegables encadenadas</title>
 
<script type="text/javascript">
var peticion = null;
 
function inicializa_xhr() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}
 
function muestraTipos() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById("tipo");
      var documento_xml = peticion.responseXML;
 
      var tipos = documento_xml.getElementsByTagName("tipos")[0];
      var losTipos = tipos.getElementsByTagName("tipo");
      lista.options[0] = new Option("- selecciona -");
 
      // Método 1: Crear elementos Option() y añadirlos a la lista
      for(i=0; i<losTipos.length; i++) {
        var codigo = losTipos[i].getElementsByTagName("codigo")[0].firstChild.nodeValue;
        var nombre = losTipos[i].getElementsByTagName("nombre")[0].firstChild.nodeValue;
        lista.options[i+1] = new Option(nombre, codigo);
      }
    }
  }
}
 
function cargaSubtipos() {
  var lista = document.getElementById("tipo");
  var tipo = lista.options[lista.selectedIndex].value;
  if(!isNaN(tipo)) {
    peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraSubtipos;
      peticion.open("POST", "http://localhost/XXXXX/combosubtipo.php?nocache=" + Math.random(), true);
      peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      peticion.send("tipo=" + tipo);
    }
  }
}
 
function muestraSubtipos() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById("subtipo");
      var documento_xml = peticion.responseXML;
 
      var subtipos = documento_xml.getElementsByTagName("subtipos")[0];
      var losSubtipos = subtipos.getElementsByTagName("subtipo");
 
      // Borrar elementos anteriores
      lista.options.length = 0;
 
      // Se utiliza el método de crear elementos Option() y añadirlos a la lista
      for(i=0; i<losSubtipos.length; i++) {
        var codigo = losSubtipos[i].getElementsByTagName("codigo")[0].firstChild.nodeValue;
        var nombre = losSubtipos[i].getElementsByTagName("nombre")[0].firstChild.nodeValue;
        lista.options[i] = new Option(nombre, codigo);
      }
    }
  }
}
 
window.onload = function() {
  peticion = inicializa_xhr();
  if(peticion) {
    peticion.onreadystatechange = muestraTipos;
    peticion.open("GET", "http://localhost/XXXXX/combotipo.php?nocache="+Math.random(), true);
    peticion.send(null);
  }
 
  document.getElementById("tipo").onchange = cargaSubtipos;
}
</script>
</head>
 
<body>
<h1>Listas desplegables encadenadas</h1>
 
<form>
  <label for="tipo">Tipo</label>
  <select id="tipo">
    <option>Cargando...</option>
  </select>
  <br/><br/>
  <label for="subtipo">Subtipo</label>
  <select id="subtipo">
    <option>- selecciona subtipo -</option>
  </select>
</form>
 
</body>
</html>

Archivos XML:
combotipo.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
header("Content-Type: application/xml");
 
$tipos["01"] = "Álava/Araba";
$tipos["02"] = "Albacete";
$tipos["03"] = "Alicante/Alacant";
$tipos["04"] = "Almería";
$tipos["05"] = "Ávila";
$tipos["06"] = "Badajoz";
$tipos["07"] = "Balears (Illes)";
$tipos["08"] = "Barcelona";
$tipos["09"] = "Burgos";
$tipos["10"] = "Cáceres";
 
foreach($tipos as $codigo => $nombre) {
  $elementos_xml[] = "<tipo>\n<codigo>$codigo</codigo>\n<nombre>".$nombre."</nombre>\n</tipo>";
 
}
 
echo "<tipos>\n".implode("\n", $elementos_xml)."\n</tipos>"
 
?>

combosubtipo.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
header("Content-Type: application/xml");
 
$subtipos["01"]["0014"] = "Alegría-Dulantzi";
$subtipos["02"]["0442"] = "Peñacerrada-Urizaharra";
$subtipos["03"]["0468"] = "Ribera Alta";
$subtipos["04"]["0474"] = "Ribera Baja/Erribera Beitia";
$subtipos["05"]["0513"] = "Salvatierra/Agurain";
$subtipos["06"]["0528"] = "Samaniego";
$subtipos["07"]["0485"] = "Minaya";
$subtipos["08"]["0498"] = "Molinicos";
$subtipos["09"]["0501"] = "Montalvos";
$subtipos["10"]["0601"] = "Montalvos";
 
$tipo = trim($_POST["tipo"]);
$losSubtipos = $subtipos[$tipo];
 
foreach($losSubtipos as $codigo => $nombre) {
  $elementos_xml[] = "<subtipo><codigo>$codigo</codigo><nombre>".$nombre."</nombre></subtipo>";
}
 
echo "<subtipos>\n".implode("\n", $elementos_xml)."</subtipos>";
?>


Muchas gracias de antemano!!!

Un saludo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder