CODEWITHSUNDEEP
ajaxlist
digove
digove

Reputation:

How do I initialize two lists at the same time with ajax?

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>

Upvotes: 0

Views: 391

Answers (3)

stephanea
stephanea

Reputation: 1156

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

Upvotes: -1

Chris Marasti-Georg
Chris Marasti-Georg

Reputation: 34650

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...

Upvotes: 2

James Curran
James Curran

Reputation: 103495

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

Upvotes: 0

Related Questions