Atualizar combobox com ajax

tspenido · Dezembro 3, 2009

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

Henrique Barcelos · Dezembro 3, 2009

Em qual navegador está testando?

Use o Firefox e veja se o console de erros aponta alguma coisa.

tspenido · Dezembro 3, 2009

Neste link: http://www.adaptersolucoes.com.br/V1_walace/php/ você vai poder ver ele em funcionamento. Quando você chega na parte de escolher um bairro, ele ate executa a consulta no BD mas ta parecendo que a variavel que é resposável e vai ser inserida na inha do mysql não está passando. ai ele executa e amostra dados que não estão corretos. Já testei no FF e no IE no IE ele apresenta dados incorretos e no FF não aparece nada!

Henrique Barcelos · Dezembro 5, 2009

Alguém? Poxa to precisando muito de ajuda!

Não dê up em seus tópicos. É contra as regras do fórum...

Eu não entendi muito bem...

O link que você passou é o seu ou é um que funciona?

Se não é o seu, tem um link para ele?

Hospede em qqr servidor gratuito...

Como seu código é extenso, fica difícil achar o erro só olhando...

tspenido · Dezembro 5, 2009

OPa, foi mal pelo up, bom ele esta hospedado em um host meu. este link link você vai poder ver ele funcionando. o q acontece é q no primeiro combo ele passa ai vai para o segundo do segundo para a terceira ele naum esta passando a variavel q usso para fazer um select no BD. Se eu colocar manualmente ele passa e dos outros continua perfeitamente e xego no meu objetivo final. onde posso estar errando?

Fico no aguardo!

William Bruno · Dezembro 5, 2009

No chrome, apesar do erro de acentos, funcionou corretamente os 4 niveis.

olha só um erro de php escondido ali..

<option>Selecione um Estado</option>
      <br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/adapter/public_html/V1_walace/php/index.php:6) in <b>/home/adapter/public_html/V1_walace/php/index.php</b> on line <b>14</b><br />
      <option value="">
                </option>
            <option value="Rio de Janeiro">
        Rio de Janeiro        </option>
          </select>

Remove essa linha do header...

header("Content-Type: text/html; charset=ISO-8859-1", true);

se você quer enviar isso, deve fazer antes de qualquer saida HTML.

O erro que o IE aponta é que:

if (retornoCombo2) {

você não definiu essa variável em nenhum outro lugar, mas mesmo assim, tentou fazer um teste com ela.

tspenido · Dezembro 5, 2009

po beleza, já realizai as modificações, mas ainda aqui tesado no IE e FF a váriavel não passa. Quando escolho o estado, ele passa para a cidade sem problemas, ai quando vou escolher a cidade para passar para o bairro, ele ta passando nenhuma variavel ai ele faz a consulta no BD sem nenhuma variavel para a condição. Ele faz a consulta sem nada (onde esta abaixo o ??????????)

SELECT DISTINCT cidade FROM empresas WHERE estado = '??????????????'

Se eu colocar manualmente a cidade de goiania, ele passa trankilo.

Bom fico no aguardo de ajuda!

valeu gente pela força!

William Bruno · Dezembro 5, 2009

Olha aqui o HTML que você tá gerando:

<select onchange="javascript:mudar2(this.value);" name="cidade">
<option>Selecione uma cidade.</option>
<option> </option>
<option> Goi�nia </option>
</select>

percebe que tá faltando um value="" ?

Por isso que não manda nada, pois não tem oque mandar !

Como você fez a página de retorno? posta o código dela ai. E atualiza os arquivos online, continua com o erro do header aqui.

tspenido · Dezembro 5, 2009

Eu ja tinha atualizado os arquivo online, to postando eles no arquivo ZIP: ZIP

bom o retorno você vai ver nos arquivos, na index ele ja faz a consulta sem usar o ajax, depois ele chama o ajax para passar a variavel e exibir outro arquivo php que realiza a consulta ai sendo visualizado a combobox.

Não sei se consegui explicar.

valeu cara e fico no aguardo.

Arquivado

Atualizar combobox com ajax

Recommended Posts

tspenido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

tspenido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

tspenido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

tspenido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

tspenido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante