Comment initialiser deux listes en même temps avec ajax?

Salut, quelqu'un sait comment initialiser deux listes en même temps avec ajax?Comment initialiser deux listes en même temps avec ajax?

C'est mon 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>

Source

2008-10-30 Anonymous

Je recommande d'utiliser un autre ID pour le nœud Ocupation, et deux fois plus d'ajouter:

JS Snip - saisir l'autre liste, ajoutez à la fois:

//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 - donner la deuxième sélectionnez un nom différent (pour le côté serveur) et id (pour le 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>

Votre code pourrait être grandement simplifiée en utilisant un cadre de JS existant, comme jQuery ...

Source

2008-10-30 16:26:45

-1

Avec ajax est peut-être pas assez précis. Voulez-vous dire en JavaScript?

Source

2008-10-30 16:28:49 stephanea

Selon vous, que signifie J dans AJAX? –

Eh bien, j'utilise php pour amener les données de mysql, puis j'ai utilisé jsscript pour remplir la liste, ça fonctionne très bien avec une liste, mais si je veux remplir deux listes en même temps, l'une d'entre elles est vide –

Vraisemblablement, l'appel Ajax va obtenir les données sous la forme d'une chaîne ou d'un objet JSON, puis appeler une fonction OnComplete que vous spécifiez. Dans le OnComplete, normalement, vous prenez ces données et l'utilisez pour remplir la liste. Il suffit de mettre le double du code de remplissage dans cette fonction.

Source

2008-10-30 16:31:56

Comment initialiser deux listes en même temps avec ajax?

Répondre

Questions connexes