Como Carregar Combobox Com Ajax?

Carlos Rocha · Abril 26, 2006

Ola pessoal. To cum seguinte problema:

Esse Código=

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Busca</title>
</head>
<body>
<?php 
  include "busca/EscolhePais.php";
  include "busca/EscolheEstado.php";
?>
<form action="Busca.php" method="post">
<table width="100%">
  <tr>
    <tudo width="23%" valign="top">
          Escolha:<br>
           <select name="listTabelas" onChange="EscolhePais(this.value);">
             <option value="0">Alugar ou Comprar</option>
             <option value="imoveiscadastroaluguel">Alugue</option>
             <option value="imoveiscadastrovenda">Compre</option>
           </select> <br>
      </tudo>
      <tudo width="40%" valign="top">
          Pais:<br>
           <select name="listPaises" onChange="EscolheEstado(this.value);">
             <option id="opcoes" value="0">Primeiro selecione Alugar ou Comprar</option>
           </select> <br>
          Estado:<br>
           <select name="listEstados">
              <option id="opcoesestados" value="0">Primeiro selecione o praís</option>
           </select>
      </tudo>
    </tr>
  </table>
</form>

</body>
</html>

É de um script com ajax. Segue as paginas EscolhePais.php e EscolheEstado.php EscolhePais.php

<script language="JavaScript">
  function EscolhePais(valor) {
  //verifica se o browser tem suporte a ajax
  try {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  catch(e) {
    try {
      ajax = new ActiveXObject("Msxml2.XMLHTTP");
    }  
    catch(ex) {
      try {
        ajax = new XMLHttpRequest();
      } 
      catch(exc) {
        alert("Esse browser não tem recursos para uso do Ajax");
        ajax = null;
      }
    }
  }
  
  //se tiver suporte ajax
  if(ajax) {
    //deixa apenas o elemento 1 no option, os outros são excluídos
    document.forms[0].listPaises.options.length = 1;

    idOpcao = document.getElementById("opcoes");

    ajax.open("POST", "busca/paises.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    ajax.onreadystatechange = function() {
      //enquanto estiver processando...emite a msg de carregando
      if(ajax.readyState == 1) {
        idOpcao.innerHTML = "Carregando...!"; 
      }  
      //após ser processado - chama função processXML que vai varrer os dados
      if(ajax.readyState == 4 ) {
        if(ajax.responseXML) {
          processXML(ajax.responseXML);
        }
      else {
        //caso não seja um arquivo XML emite a mensagem abaixo
        idOpcao.innerHTML = "Primeiro selecione Alugar ou Comprar";
      }
    }
  }
  //passa o código do Pais escolhido
  var params = "tabela="+valor;
  ajax.send(params);
  }
}

function processXML(obj){
  //pega a tag cidade
  var dataArray = obj.getElementsByTagName("tpais");

  //total de elementos contidos na tag cidade
  if(dataArray.length > 0) {
    //percorre o arquivo XML paara extrair os dados
    for(var i = 0; i < dataArray.length; i++) {
      var item = dataArray[i];
      //contéudo dos campos no arquivo XML
      var ID = item.getElementsByTagName("Id")[0].firstChild.nodeValue;
      var Pais = item.getElementsByTagName("Pais")[0].firstChild.nodeValue;

      idOpcao.innerHTML = "Selecione o Pais";

      //cria um novo option dinamicamente 
      var novo = document.createElement("option");
      //atribui um ID a esse elemento
      novo.setAttribute("id", "opcoes");
      //atribui um valor
      novo.value = Pais;
      //atribui um texto
      novo.text = Pais;
      //finalmente adiciona o novo elemento
      document.forms[0].listPaises.options.add(novo);
    }
  }
  else {
    //caso o XML volte vazio, printa a mensagem abaixo
    idOpcao.innerHTML = "Primeiro selecione Alugar ou Comprar";
  } 
}
</script>

EscolheEstado.php

<script language="JavaScript">
  function EscolheEstado(valor) {
  //verifica se o browser tem suporte a ajax
  try {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  catch(e) {
    try {
      ajax = new ActiveXObject("Msxml2.XMLHTTP");
    }  
    catch(ex) {
      try {
        ajax = new XMLHttpRequest();
      } 
      catch(exc) {
        alert("Esse browser não tem recursos para uso do Ajax");
        ajax = null;
      }
    }
  }
  
  //se tiver suporte ajax
  if(ajax) {
    //deixa apenas o elemento 1 no option, os outros são excluídos
    document.forms[0].listEstados.options.length = 1;

    idOpcaoEstados = document.getElementById("opcoesestados");

    ajax.open("POST", "busca/estados.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    ajax.onreadystatechange = function() {
      //enquanto estiver processando...emite a msg de carregando
      if(ajax.readyState == 1) {
        idOpcaoEstados.innerHTML = "Carregando...!"; 
      }  
      //após ser processado - chama função processXML que vai varrer os dados
      if(ajax.readyState == 4 ) {
        if(ajax.responseXML) {
          processXML(ajax.responseXML);
        }
      else {
        //caso não seja um arquivo XML emite a mensagem abaixo
        idOpcaoEstados.innerHTML = "Primeiro selecione o praís";
      }
    }
  }
  //passa o código do Pais escolhido
  var params = "pais="+valor;
  ajax.send(params);
  }
}

function processXML(obj){
  //pega a tag cidade
  var dataArray = obj.getElementsByTagName("testado");

  //total de elementos contidos na tag cidade
  if(dataArray.length > 0) {
    //percorre o arquivo XML paara extrair os dados
    for(var i = 0; i < dataArray.length; i++) {
      var item = dataArray[i];
      //contéudo dos campos no arquivo XML
      var ID = item.getElementsByTagName("Id")[0].firstChild.nodeValue;
      var Estado = item.getElementsByTagName("Estado")[0].firstChild.nodeValue;

      idOpcaoEstados.innerHTML = "Selecione o Estado";

      //cria um novo option dinamicamente 
      var novo = document.createElement("option");
      //atribui um ID a esse elemento
      novo.setAttribute("id", "opcoesestados");
      //atribui um valor
      novo.value = Estado;
      //atribui um texto
      novo.text = Estado;
      //finalmente adiciona o novo elemento
      document.forms[0].listEstados.options.add(novo);
    }
  }
  else {
    //caso o XML volte vazio, printa a mensagem abaixo
    idOpcaoEstados.innerHTML = "Primeiro selecione o praís";
  } 
}
</script>

Paises.php

<?
//CONECTA AO MYSQL 
require_once("../../global/conexao.php"); 

//RECEBE PARÂMETRO 
$tabela = $_POST["tabela"]; 

//QUERY 
$sql = "SELECT * FROM $tabela"; 

//EXECUTA A QUERY 
$sql = mysql_query($sql); 
$row = mysql_num_rows($sql); 

//VERIFICA SE VOLTOU ALGO 
if($row) { 
  //XML
  $xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
  $xml .= "<tpaises>\n"; 

  //PERCORRE ARRAY  
  for($i=0; $i<$row; $i++) { 
    $Id = mysql_result($sql, $i, "Id"); 
    $Pais = mysql_result($sql, $i, "Pais");
    $xml .= "<tpais>\n"; 
    $xml .= "<Id>".$Id."</Id>\n"; 
    $xml .= "<Pais>".$Pais."</Pais>\n"; 
    $xml .= "</tpais>\n"; 
  }//FECHA FOR 

  $xml.= "</tpaises>\n";

  //CABEÇALHO
  Header("Content-type: application/xml; charset=iso-8859-1"); 
}//FECHA IF (row)

//PRINTA O RESULTADO 
echo $xml; 
?>

Estados.php

<?
//CONECTA AO MYSQL 
require_once("../../global/conexao.php"); 

//RECEBE PARÂMETRO 
$pais = $_POST["pais"]; 
$tabela = $_POST["tabela"]; 

//QUERY 
$sql = "SELECT * FROM $tabela where Pais = '$pais'"; 
//$sql = "SELECT * FROM imoveiscadastrovenda where Pais = '$pais'"; 

//EXECUTA A QUERY 
$sql = mysql_query($sql); 
$row = mysql_num_rows($sql); 

//VERIFICA SE VOLTOU ALGO 
if($row) { 
  //XML
  $xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
  $xml .= "<testados>\n"; 

  //PERCORRE ARRAY  
  for($i=0; $i<$row; $i++) { 
    $Id = mysql_result($sql, $i, "Id"); 
    $Estado = mysql_result($sql, $i, "Estado");
    $xml .= "<testado>\n"; 
    $xml .= "<Id>".$Id."</Id>\n"; 
    $xml .= "<Estado>".$Estado."</Estado>\n"; 
    $xml .= "</testado>\n"; 
  }//FECHA FOR 

  $xml.= "</testados>\n";

  //CABEÇALHO
  Header("Content-type: application/xml; charset=iso-8859-1"); 
}//FECHA IF (row)

//PRINTA O RESULTADO 
echo $xml; 
?>

O Problema é que, o quando eu faço só o carregamento do combo dos paises quando escolho a tabela=alugue ou compre vai bem mas se eu escolher o pais para popular o combobox dos estados aí da erro;

idOpcaoEstados não esta definido na linha 175.
Essa linha esta no arquivo EscolheEstado.php

    idOpcaoEstados.innerHTML = "Primeiro selecione o praís";