Click here to Skip to main content
16,009,728 members
Home / Discussions / ASP.NET
   

ASP.NET

 
QuestionJavascript calendar control for first time not openning in Mozilla Pin
attalurisubbu27-May-10 5:09
attalurisubbu27-May-10 5:09 
QuestionHow to get configuration file's path Pin
Eric Vonjacson27-May-10 2:07
Eric Vonjacson27-May-10 2:07 
AnswerRe: How to get configuration file's path Pin
Andreas X27-May-10 2:16
professionalAndreas X27-May-10 2:16 
QuestionWhere is the appropriate lifecycle step we can introduce JavaScript execution in the page Pin
yadlaprasad27-May-10 1:57
yadlaprasad27-May-10 1:57 
QuestionGridView Edit Pin
Member 322226427-May-10 1:08
Member 322226427-May-10 1:08 
AnswerRe: GridView Edit Pin
Sandeep Mewara27-May-10 1:35
mveSandeep Mewara27-May-10 1:35 
AnswerRe: GridView Edit Pin
Andreas X27-May-10 2:06
professionalAndreas X27-May-10 2:06 
QuestionSimple DropdownList with javascript Ajax Pin
garfield18526-May-10 22:06
garfield18526-May-10 22:06 
Hi everybody.

I'm trying to learn Javascript and Ajax, and I'm kind of lost with this thing.
The Idea is to have two dropdownlist on the page, the first one loads data from an xml file with, for example, a list of countries, and after selecting a country the second one loads towns of the selected country.

The idea is really simple, I'm following a manual but I can't make it work.
Can somebody help me please?

This is the code I write on an aspx file (VS2005), taken from the manual.

I get an error on the line
var provincias = documento_xml.getElementsByTagName("provincias")[0];

it seems that is returns null...

I'd appreciate if you could send me a link where I can find a similar idea, that I can study. Thanks.

<!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 muestraProvincias() 
            {
                if (peticion.readyState == 4) 
                {
                    if (peticion.status == 200) 
                    {
                        var lista = document.getElementById("provincia");
                        var documento_xml = peticion.responseXML;
                        var provincias = documento_xml.getElementsByTagName("provincias")[0];
                        var lasProvincias = provincias.getElementsByTagName("provincia");
                        lista.options[0] = new Option("- selecciona -");
                        // Método 1: Crear elementos Option() y añadirlos a la lista
                        for(i=0; i<lasProvincias.length; i++) 
                        {
                            var codigo = lasProvincias[i].getElementsByTagName("codigo")[0].firstChild.nodeValue;
                            var nombre = lasProvincias[i].getElementsByTagName("nombre")[0].firstChild.nodeValue;
                            lista.options[i+1] = new Option(nombre, codigo);
                        }
                    }
                }
            }
            
            function cargaMunicipios() 
            {
                var lista = document.getElementById("provincia");
                var provincia = lista.options[lista.selectedIndex].value;
                if(!isNaN(provincia)) 
                {
                    peticion = inicializa_xhr();
                    if (peticion) 
                    {
                        peticion.onreadystatechange = muestraMunicipios;
                        peticion.open("POST", "http://localhost/Modal/cargaMunicipiosXML.php?nocache=" + Math.random(), true);
                        peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        peticion.send("provincia=" + provincia);
                    }
                }
            }
            
            function muestraMunicipios()
            {
                if (peticion.readyState == 4) 
                {
                    if (peticion.status == 200) 
                    {        
                        var lista = document.getElementById("municipio");
                        var documento_xml = peticion.responseXML;
                        var municipios = documento_xml.getElementsByTagName("municipios")[0];
                        var losMunicipios = municipios.getElementsByTagName("municipio");
                        // 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<losMunicipios.length; i++) 
                        {
                            var codigo =
                            losMunicipios[i].getElementsByTagName("codigo")[0].firstChild.nodeValue;
                            var nombre =
                            losMunicipios[i].getElementsByTagName("nombre")[0].firstChild.nodeValue;
                            lista.options[i] = new Option(nombre, codigo);
                        }
                    }
                }
            }
            
            window.onload = function() 
            {
                peticion = inicializa_xhr();
                if(peticion) 
                {
                    peticion.onreadystatechange = muestraProvincias;
                    peticion.open("GET", "http://localhost/Modal/cargaProvinciasXML.php?nocache="+Math.random(), true);
                    peticion.send(null);
                }
                document.getElementById("provincia").onchange = cargaMunicipios;
            }
        </script>
    </head>
    <body>
        <h1>Listas desplegables encadenadas</h1>
        <form action="cargaProvinciasXML.php">
            <label for="provincia">Provincia</label>
            <select id="provincia">
                <option>Cargando...</option>
            </select>
            <br/><br/>
            <label for="municipio">Municipio</label>
            <select id="municipio">
                <option>- selecciona una provincia -</option>
            </select>
        </form>
    </body>
</html>



PS: The information of tows and countries is stored on two php files with this format:
CargaprovinciasXML.php

<?php
header("Content-Type: application/xml");

$provincias["01"] = "Álava/Araba";
$provincias["02"] = "Albacete";
...
$provincias["49"] = "Zamora";
$provincias["50"] = "Zaragoza";



foreach($provincias as $codigo => $nombre) {
  $elementos_xml[] = "<provincia>\n<codigo>$codigo</codigo>\n<nombre>".$nombre."</nombre>\n</provincia>";
}

echo "<provincias>\n".implode("\n", $elementos_xml)."\n</provincias>"

?>



CargaMunicipiosXML.php


<?php
header("Content-Type: application/xml");

$municipios["01"]["0014"] = "Alegría-Dulantzi";
$municipios["01"]["0029"] = "Amurrio";
...
$municipios["51"]["0013"] = "Ceuta";
$municipios["52"]["0018"] = "Melilla";


$provincia = trim($_POST["provincia"]);
$losMunicipios = $municipios[$provincia];

foreach($losMunicipios as $codigo => $nombre) {
  $elementos_xml[] = "<municipio><codigo>$codigo</codigo><nombre>".$nombre."</nombre></municipio>";
}

echo "<municipios>\n".implode("\n", $elementos_xml)."</municipios>";

?>

Questionhow to remove browse text and decrease the size browse button of fileupload control in asp.net Pin
developerit26-May-10 22:02
developerit26-May-10 22:02 
AnswerRe: how to remove browse text and decrease the size browse button of fileupload control in asp.net Pin
Sandeep Mewara26-May-10 23:26
mveSandeep Mewara26-May-10 23:26 
QuestionOpen Save as dialog in ultrawebgrid hyperlink cell onclick Pin
priyagee26-May-10 21:41
priyagee26-May-10 21:41 
QuestionVS 2005 takes much time to load Pin
reogeo200826-May-10 20:17
reogeo200826-May-10 20:17 
Questionheight Pin
siva45526-May-10 10:56
siva45526-May-10 10:56 
AnswerRe: height Pin
Not Active26-May-10 14:19
mentorNot Active26-May-10 14:19 
AnswerRe: height Pin
Sandeep Mewara26-May-10 19:22
mveSandeep Mewara26-May-10 19:22 
Questioniframe Pin
siva45526-May-10 8:35
siva45526-May-10 8:35 
AnswerRe: iframe Pin
T M Gray26-May-10 9:33
T M Gray26-May-10 9:33 
GeneralRe: iframe Pin
siva45526-May-10 9:56
siva45526-May-10 9:56 
GeneralRe: iframe Pin
T M Gray28-May-10 5:16
T M Gray28-May-10 5:16 
Questiontiny mce editor issue Pin
trilokharry26-May-10 4:37
trilokharry26-May-10 4:37 
Questionhow to read first two letters from the string Pin
developerit26-May-10 3:30
developerit26-May-10 3:30 
AnswerRe: how to read first two letters from the string Pin
FarmerHE26-May-10 3:49
FarmerHE26-May-10 3:49 
AnswerRe: how to read first two letters from the string Pin
Tej Aj26-May-10 3:51
Tej Aj26-May-10 3:51 
GeneralRe: how to read first two letters from the string Pin
developerit26-May-10 22:01
developerit26-May-10 22:01 
AnswerRe: how to read first two letters from the string Pin
Pete O'Hanlon26-May-10 4:17
mvePete O'Hanlon26-May-10 4:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.