tags:

views:

247

answers:

3

Hi does anybody know how to initialize two list at the same time with ajax?

This is my code

<html>
<body onload="iniciaListas()">

<script type="text/javascript">
var xmlHttp
function iniciaListas()
{
     muestraListaPaises();
     muestraListaProfesiones();
}
function muestraListaProfesiones()
{
    //Se inicializa el objeto ajax para manipular los eventos asincronos al servidor
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
      alert ("Your browser does not support AJAX!");
      return;
    } 
    //Se obtine el id de la lista
    var obCon = document.getElementById("ocupacion");
    //Por medio del metodo GET se llama nuestra pagina PHP
    xmlHttp.open("GET", "../Listas/listaProfesiones.php");
    //On ready funcion es la funcion que se da cuenta cuando la pagina php acaba de hacer su proceso
    xmlHttp.onreadystatechange = function() {
     //el estado 4 indica que esta listo para procesar la instruccion
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      //despues que nuestro objeto ajax  proceso la pagina php recupera un xml generado
      obXML = xmlHttp.responseXML;
      //despues obtine los datos contenidos en las siguites etiquetas
      obCod = obXML.getElementsByTagName("ID");
      obDes = obXML.getElementsByTagName("NOMPROFESION");
      //esta funcion devuelve en su la longitud de todos los registros 
      obCon.length=obCod.length;
      //cilclo de llenado para las listas
      for (var i=0; i<obCod.length;i++) {
       obCon.options[i].value=obCod[i].firstChild.nodeValue;
       obCon.options[i].text=obDes[i].firstChild.nodeValue;
      }
     }
    } 
    //este objeto envia un nulll debido a que el metodo utilizado es get
    xmlHttp.send(null);
}
function muestraListaPaises()
{
    //Se inicializa el objeto ajax para manipular los eventos asincronos al servidor
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
      alert ("Your browser does not support AJAX!");
      return;
    } 
    //Se obtine el id de la lista
    var obCon = document.getElementById("pais");
    //Por medio del metodo GET se llama nuestra pagina PHP
    xmlHttp.open("GET", "../Listas/listaPaises.php");
    //On ready funcion es la funcion que se da cuenta cuando la pagina php acaba de hacer su proceso
    xmlHttp.onreadystatechange = function() {
     //el estado 4 indica que esta listo para procesar la instruccion
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      //despues que nuestro objeto ajax  proceso la pagina php recupera un xml generado
      obXML = xmlHttp.responseXML;
      //despues obtine los datos contenidos en las siguites etiquetas
      obCod = obXML.getElementsByTagName("ID");
      obDes = obXML.getElementsByTagName("NOMPAIS");
      //esta funcion devuelve en su la longitud de todos los registros 
      obCon.length=obCod.length;
      //cilclo de llenado para las listas
      for (var i=0; i<obCod.length;i++) {
       obCon.options[i].value=obCod[i].firstChild.nodeValue;
       obCon.options[i].text=obDes[i].firstChild.nodeValue;
      }
     }
    } 
    //este objeto envia un nulll debido a que el metodo utilizado es get
    xmlHttp.send(null);
}

    function GetXmlHttpObject()
    {
     var xmlHttp=null;
     try
       {
       // Firefox, Opera 8.0+, Safari
       xmlHttp=new XMLHttpRequest();
       }
     catch (e)
       {
       // Internet Explorer
       try
         {
         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
         }
       catch (e)
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
       }
     return xmlHttp;
    }  
</script>

<html>

<body onload="iniciaListas()">
<script type="text/javascript" src="lists.js"> </script>
<b>Country</b><br>
<select name="pais" id="pais" ></select>

<b>Ocupation</b><br>
<select name="pais" id="pais" ></select>
</body>

</html>
+2  A: 

I would recommend using a different ID for the Ocupation node, and double the adding:

JS Snip - grab the other list, add to both:

//Se obtine el id de la lista
var obCon = document.getElementById("pais");
var obOcupation = document.getElementById("ocupation");

...

for (var i=0; i<obCod.length;i++) {
   obCon.options[i].value=obCod[i].firstChild.nodeValue;
   obCon.options[i].text=obDes[i].firstChild.nodeValue;
   obOcupation.options[i].value=obCod[i].firstChild.nodeValue;
   obOcupation.options[i].text=obDes[i].firstChild.nodeValue;
}

HTML - give the second select a different name (for the server side) and id (for the javascript):

<html>
<body onload="iniciaListas()">
<script type="text/javascript" src="lists.js"> </script>
<b>Country</b><br>
<select name="pais" id="pais" ></select>

<b>Ocupation</b><br>
<select name="ocupation-pais" id="ocupation" ></select>
</body>

</html>

Your code could be greatly simplified by using an existing JS framework, like jQuery...

Chris Marasti-Georg
A: 

With ajax is perhaps not specific enough. Do you mean in javascipt?

stephanea
What do you think the J in AJAX stands for?
Chris Marasti-Georg
Well i'm using php for bring data from mysql, and then y used jsscript to fill the list, it's works fine with one list, but if i want to fill two list at the same time one of them are empty
A: 

Presumably, the Ajax call is going to get the data in the form of a string or JSON object, and then call some OnComplete function that you specify. In the OnComplete, normally, you take that data and use it to fill the list. Just put double the fill code in that function

James Curran