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:
Archivos XML:
combotipo.php
combosubtipo.php
Muchas gracias de antemano!!!
Un saludo.
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
0