Как инициализировать два списка одновременно с помощью ajax? - PullRequest
Новая
       14

Как инициализировать два списка одновременно с помощью ajax?

0 голосов
/ 30 октября 2008

Привет, кто-нибудь знает, как инициализировать два списка одновременно с помощью ajax?

Это мой код 

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

Ответы [ 3 ]

2 голосов
/ 30 октября 2008

Я бы рекомендовал использовать другой идентификатор для узла Ocupation и удвоить добавление:

JS Snip - возьмите другой список, добавьте к обоим: 

//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 - укажите второму имени другое имя (для серверной части) и идентификатор (для 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>

Ваш код может быть значительно упрощен при использовании существующей платформы JS, например jQuery ...

0 голосов
/ 30 октября 2008

Предположительно, вызов Ajax получит данные в виде строки или объекта JSON, а затем вызовет некоторую указанную вами функцию OnComplete. Обычно в OnComplete вы берете эти данные и используете их для заполнения списка. Просто вставьте двойной код заполнения в эту функцию

0 голосов
/ 30 октября 2008

С ajax, возможно, недостаточно конкретен. Вы имеете в виду в JavaScript?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...