Publicado em 3 de dez.

Atualizar combobox com ajax

Olá pessoal,

não entendo muito de ajax mas peguei este cod na net e estou tentando implementar.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<script language="javascript" type="text/javascript" src="arquivo_ajax.js"></script>
</head>
<body>
<table width="0" border="0" cellspacing="0" cellpadding="5">
 <tr>
 <td><select name="estado" onchange="javascript:mudar(this.value);">
 <option>Selecione um Estado</option>
 <?
 header("Content-Type: text/html; charset=ISO-8859-1", true);
 // INCLUSÃO DO ARQUIVOS DE CONFIGURAÇÃO E CONEXÃO COM O BANCO DE DADOS
 include("../V1/classes/class.configbd.php");
	$sql = new conectar();
	$sql->conecta();
 //
 $sqlBD = "SELECT DISTINCT estado FROM empresas";
 $resultado = $sql->executaBD($sqlBD) or die ("Problema na Consulta");
 while($linha = $sql->fecth_arrayBD($resultado))
 {
?>
 <option value="<?=$linha['estado']; ?>">
 <?=$linha['estado']; ?>
 </option>
 <?
 }
?>
 </select></td>
 <td> </td>
 <td><div id="mostraCombo"></div></td>
 <td> </td>
 <td><div id="mostraCombo2"></div></td>
 <td> </td>
 <td><div id="mostraCombo3"></div></td>
 <td> </td>
 <td><div id="mostraCombo4"></div></td>
 <td> </td>
 </tr>
</table>
</body>
</html>

arquivo_ajax.js

//CRIA A VARIÁVEL RETORNO

var retorno;
var retorno2;
var retorno3;
var retorno4;
function CarregaArquivo(url,valor)

{

 retorno = null;
	//CRIA O OBJETO HttpRequest PARA O RESPECTIVO NAVEGADOR
	//Mozilla Fire Fox / Safari ...
	//
 if (window.XMLHttpRequest) {
 retorno = new XMLHttpRequest();
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno.onreadystatechange = processReqChange;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno.open("GET", url+'?estado='+valor, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno.send(null);
 } else if (window.ActiveXObject) {
 //
 //IE
 //
 retorno = new ActiveXObject("Microsoft.XMLHTTP");
 if (retorno) {
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno.onreadystatechange = processReqChange;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno.open("GET", url+'?estado='+valor, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno.send();
 }
 }
}

//FUNÇÃO QUE TRATA O RETORNO DO AJAX
function processReqChange()
{
//CASO O STATUS DO AJAX SEJA OK, CHAMA A FUNÇÃO mudar()
//A LISTA COMPLETA DOS VALORES readyState É A SEGUINTE:
//0 (uninitialized)
//1 (a carregar)
//2 (carregado)
//3 (interactivo)
//4 (completo)

 if (retorno.readyState == 4)
	{
 if(retorno.status == 200)
 {
 //PROCURA PELA DIV MOSTRACOMBO E INSERE O OBJETO
 document.getElementById('mostraCombo').innerHTML = retorno.responseText;
 }

 else
 {
 //MOSTRA UM ALERTA AO OBTER UM RETORNO DE OK.
 alert("Houve um problema ao obter os dados:\n" + retorno.statusText);
 }
 }
}

////////////////////////////////////////////////////////////////////////////
function CarregaArquivo2(url2,valor2)
{

 retorno2 = null;
	//CRIA O OBJETO HttpRequest PARA O RESPECTIVO NAVEGADOR
	//Mozilla Fire Fox / Safari ...
	//
 if (window.XMLHttpRequest) {
 retorno2 = new XMLHttpRequest();
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno2.onreadystatechange = processReqChange2;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno2.open("GET", url2+'?cidade='+valor2, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno2.send(null);
 } else if (window.ActiveXObject) {
 //
 //IE
 //
 retorno2 = new ActiveXObject("Microsoft.XMLHTTP");
 if (retornoCombo2) {
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno2.onreadystatechange = processReqChange2;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno2.open("GET", url2+'?cidade='+valor2, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno2.send();
 }
 }
}

//FUNÇÃO QUE TRATA O RETORNO DO AJAX
function processReqChange2()
{
//CASO O STATUS DO AJAX SEJA OK, CHAMA A FUNÇÃO mudar()
//A LISTA COMPLETA DOS VALORES readyState É A SEGUINTE:
//0 (uninitialized)
//1 (a carregar)
//2 (carregado)
//3 (interactivo)
//4 (completo)

 if (retorno2.readyState == 4)
	{
 if(retorno2.status == 200)
 {
 //PROCURA PELA DIV MOSTRACOMBO E INSERE O OBJETO
 document.getElementById('mostraCombo2').innerHTML = retorno2.responseText;
 }

 else
 {
 //MOSTRA UM ALERTA AO OBTER UM RETORNO DE OK.
 alert("Houve um problema ao obter os dados:\n" + retorno2.statusText);
 }
 }
}

////////////////////////////////////////////////////////////////////////////
function CarregaArquivo3(url3,valor3)
{

 retorno3 = null;
	//CRIA O OBJETO HttpRequest PARA O RESPECTIVO NAVEGADOR
	//Mozilla Fire Fox / Safari ...
	//
 if (window.XMLHttpRequest) {
 retorno3 = new XMLHttpRequest();
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno3.onreadystatechange = processReqChange3;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno3.open("GET", url3+'?bairro='+valor3, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno3.send(null);
 } else if (window.ActiveXObject) {
 //
 //IE
 //
 retorno3 = new ActiveXObject("Microsoft.XMLHTTP");
 if (retorno3) {
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno3.onreadystatechange = processReqChange3;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno3.open("GET", url3+'?bairro='+valor3, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno3.send();
 }
 }
}

//FUNÇÃO QUE TRATA O RETORNO DO AJAX
function processReqChange3()
{
//CASO O STATUS DO AJAX SEJA OK, CHAMA A FUNÇÃO mudar()
//A LISTA COMPLETA DOS VALORES readyState É A SEGUINTE:
//0 (uninitialized)
//1 (a carregar)
//2 (carregado)
//3 (interactivo)
//4 (completo)

 if (retorno3.readyState == 4)
	{
 if(retorno3.status == 200)
 {
 //PROCURA PELA DIV MOSTRACOMBO E INSERE O OBJETO
 document.getElementById('mostraCombo3').innerHTML = retorno3.responseText;
 }

 else
 {
 //MOSTRA UM ALERTA AO OBTER UM RETORNO DE OK.
 alert("Houve um problema ao obter os dados:\n" + retorno3.statusText);
 }
 }
}

////////////////////////////////////////////////////////////////////////////
function CarregaArquivo4(url4,valor4)
{

 retorno4 = null;
	//CRIA O OBJETO HttpRequest PARA O RESPECTIVO NAVEGADOR
	//Mozilla Fire Fox / Safari ...
	//
 if (window.XMLHttpRequest) {
 retorno4 = new XMLHttpRequest();
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno4.onreadystatechange = processReqChange4;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno4.open("GET", url4+'?atividades='+valor4, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno4.send(null);
 } else if (window.ActiveXObject) {
 //
 //IE
 //
 retorno4 = new ActiveXObject("Microsoft.XMLHTTP");
 if (retorno4) {
 //SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
 retorno4.onreadystatechange = processReqChange4;
 //ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
 retorno4.open("GET", url4+'?atividades='+valor4, true);
 //INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
 retorno4.send();
 }
 }
}

//FUNÇÃO QUE TRATA O RETORNO DO AJAX
function processReqChange4()
{
//CASO O STATUS DO AJAX SEJA OK, CHAMA A FUNÇÃO mudar()
//A LISTA COMPLETA DOS VALORES readyState É A SEGUINTE:
//0 (uninitialized)
//1 (a carregar)
//2 (carregado)
//3 (interactivo)
//4 (completo)

 if (retorno4.readyState == 4)
	{
 if(retorno4.status == 200)
 {
 //PROCURA PELA DIV MOSTRACOMBO E INSERE O OBJETO
 document.getElementById('mostraCombo4').innerHTML = retorno4.responseText;
 }

 else
 {
 //MOSTRA UM ALERTA AO OBTER UM RETORNO DE OK.
 alert("Houve um problema ao obter os dados:\n" + retorno4.statusText);
 }
 }
}

//FUNÇÃO MUDAR, QUE CHAMA AS INFORMAÇÕES PASSADAS NO PARÂMETRO E CARREGA O ARQUIVO EXTERNO
function mudar(valor)
{
//CARREGA O ARQUIVO EXTERNO DO AJAX

 CarregaArquivo("mostra_combo.php",valor);
}
function mudar2(valor2)

{
//CARREGA O ARQUIVO EXTERNO DO AJAX

 CarregaArquivo2("mostra_combo2.php",valor2);
}
function mudar3(valor3)

{
//CARREGA O ARQUIVO EXTERNO DO AJAX

 CarregaArquivo3("mostra_combo3.php",valor3);
}
function mudar4(valor4)

{
//CARREGA O ARQUIVO EXTERNO DO AJAX

 CarregaArquivo4("mostra_combo4.php",valor4);
}

nos outros combos

<table width="0" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><select name="cidade" onchange="javascript:mudar2(this.value);">
 <option>Selecione uma cidade.</option>
 <?php
 // INCLUSÃO DO ARQUIVOS DE CONFIGURAÇÃO E CONEXÃO COM O BANCO DE DADOS
	include("../V1/classes/class.configbd.php");
	$sql = new conectar();
	$sql->conecta();
	$get2 = $_GET['estado'];
	$resposta2 = "<script>alert('Não existe Empresas com o Estado escolhido. Tente novamente.');</script>";
	if($get2 == ""){
 echo("$resposta2");
 }else{
 $sqlBD2 = "SELECT DISTINCT cidade FROM empresas WHERE estado = '$get2'";
 $resultado2 = $sql->executaBD($sqlBD2) or die ("Erro na consulta do banco");
 while($linha2 = $sql->fecth_arrayBD($resultado2))
 {
?>
 <option>
 <?=$linha2['cidade'];?>
 </option>
 <?php } ?>
 </select>
<?php } ?>

no segundo combobox ele chama do BD corretamente, depois para o terceiro ele só cria a combobox mais não passa a variavel para que seja implementada na linha de consulta mysql, ela passa em branco.

Onde posso estar errando!?

valeu gente!

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...