code_junkie

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

Nov 12th, 2011
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.35 KB | None | 0 0
  1. <html>
  2. <body onload="iniciaListas()">
  3.  
  4. <script type="text/javascript">
  5. var xmlHttp
  6. function iniciaListas()
  7. {
  8. muestraListaPaises();
  9. muestraListaProfesiones();
  10. }
  11. function muestraListaProfesiones()
  12. {
  13. //Se inicializa el objeto ajax para manipular los eventos asincronos al servidor
  14. xmlHttp=GetXmlHttpObject();
  15. if (xmlHttp==null)
  16. {
  17. alert ("Your browser does not support AJAX!");
  18. return;
  19. }
  20. //Se obtine el id de la lista
  21. var obCon = document.getElementById("ocupacion");
  22. //Por medio del metodo GET se llama nuestra pagina PHP
  23. xmlHttp.open("GET", "../Listas/listaProfesiones.php");
  24. //On ready funcion es la funcion que se da cuenta cuando la pagina php acaba de hacer su proceso
  25. xmlHttp.onreadystatechange = function() {
  26. //el estado 4 indica que esta listo para procesar la instruccion
  27. if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  28. //despues que nuestro objeto ajax proceso la pagina php recupera un xml generado
  29. obXML = xmlHttp.responseXML;
  30. //despues obtine los datos contenidos en las siguites etiquetas
  31. obCod = obXML.getElementsByTagName("ID");
  32. obDes = obXML.getElementsByTagName("NOMPROFESION");
  33. //esta funcion devuelve en su la longitud de todos los registros
  34. obCon.length=obCod.length;
  35. //cilclo de llenado para las listas
  36. for (var i=0; i<obCod.length;i++) {
  37. obCon.options[i].value=obCod[i].firstChild.nodeValue;
  38. obCon.options[i].text=obDes[i].firstChild.nodeValue;
  39. }
  40. }
  41. }
  42. //este objeto envia un nulll debido a que el metodo utilizado es get
  43. xmlHttp.send(null);
  44. }
  45. function muestraListaPaises()
  46. {
  47. //Se inicializa el objeto ajax para manipular los eventos asincronos al servidor
  48. xmlHttp=GetXmlHttpObject();
  49. if (xmlHttp==null)
  50. {
  51. alert ("Your browser does not support AJAX!");
  52. return;
  53. }
  54. //Se obtine el id de la lista
  55. var obCon = document.getElementById("pais");
  56. //Por medio del metodo GET se llama nuestra pagina PHP
  57. xmlHttp.open("GET", "../Listas/listaPaises.php");
  58. //On ready funcion es la funcion que se da cuenta cuando la pagina php acaba de hacer su proceso
  59. xmlHttp.onreadystatechange = function() {
  60. //el estado 4 indica que esta listo para procesar la instruccion
  61. if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  62. //despues que nuestro objeto ajax proceso la pagina php recupera un xml generado
  63. obXML = xmlHttp.responseXML;
  64. //despues obtine los datos contenidos en las siguites etiquetas
  65. obCod = obXML.getElementsByTagName("ID");
  66. obDes = obXML.getElementsByTagName("NOMPAIS");
  67. //esta funcion devuelve en su la longitud de todos los registros
  68. obCon.length=obCod.length;
  69. //cilclo de llenado para las listas
  70. for (var i=0; i<obCod.length;i++) {
  71. obCon.options[i].value=obCod[i].firstChild.nodeValue;
  72. obCon.options[i].text=obDes[i].firstChild.nodeValue;
  73. }
  74. }
  75. }
  76. //este objeto envia un nulll debido a que el metodo utilizado es get
  77. xmlHttp.send(null);
  78. }
  79.  
  80. function GetXmlHttpObject()
  81. {
  82. var xmlHttp=null;
  83. try
  84. {
  85. // Firefox, Opera 8.0+, Safari
  86. xmlHttp=new XMLHttpRequest();
  87. }
  88. catch (e)
  89. {
  90. // Internet Explorer
  91. try
  92. {
  93. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  94. }
  95. catch (e)
  96. {
  97. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  98. }
  99. }
  100. return xmlHttp;
  101. }
  102. </script>
  103.  
  104. <html>
  105.  
  106. <body onload="iniciaListas()">
  107. <script type="text/javascript" src="lists.js"> </script>
  108. <b>Country</b><br>
  109. <select name="pais" id="pais" ></select>
  110.  
  111. <b>Ocupation</b><br>
  112. <select name="pais" id="pais" ></select>
  113. </body>
  114.  
  115. </html>
  116.  
  117. //Se obtine el id de la lista
  118. var obCon = document.getElementById("pais");
  119. var obOcupation = document.getElementById("ocupation");
  120.  
  121. ...
  122.  
  123. for (var i=0; i<obCod.length;i++) {
  124. obCon.options[i].value=obCod[i].firstChild.nodeValue;
  125. obCon.options[i].text=obDes[i].firstChild.nodeValue;
  126. obOcupation.options[i].value=obCod[i].firstChild.nodeValue;
  127. obOcupation.options[i].text=obDes[i].firstChild.nodeValue;
  128. }
  129.  
  130. <html>
  131. <body onload="iniciaListas()">
  132. <script type="text/javascript" src="lists.js"> </script>
  133. <b>Country</b><br>
  134. <select name="pais" id="pais" ></select>
  135.  
  136. <b>Ocupation</b><br>
  137. <select name="ocupation-pais" id="ocupation" ></select>
  138. </body>
  139.  
  140. </html>
Add Comment
Please, Sign In to add comment