25 replies to this topic

[gnuclear]

Estou tentando fazer um combo box onde o usuario informa primeiro o estado, informado o estado, no box seguinte (cidade) são carregadas apenas as cidades desse estado, e depois de informar a cidade, são listados no box seguinte apenas os bairros dessa cidade.

Peguei um tutorial e tentei adaptar ele a minha realidade. Mas o código não está funcionando.

endereço do tutorial http://www.gilbertoa...com-jquery-php/

vejam como está:

formulario:

  <select name="estados" id="estados" onchange="buscacidades('xmlcidades.php','cidades');">
          <option selected="selected" value="NDA">-- Estados --</option>
          <option value="PB">PARA&Iacute;BA</option>
          <option value="AL">ALAGOAS</option>
          <option value="CE">CEAR&Aacute;</option>
          <option value="PE">PERNAMBUCO</option>
          <option value="RN">RIO GRANDE DO NORTE</option>
          <option value="SE">SERGIPE</option>
        </select>
        <br />
        <select name="cidades" id="cidades" onchange="alert(this.value);" >
          <option>-- Escolha um Estado --</option>
        </select>
        <br />
        <select name="bairros" id="bairros">
          <option>-- Escolha uma Estado --</option>
        </select>

o código do javascript:

jQuery(document).ready
(
	function() 
	{
		comboDinamico("estados", "cidades", "bairros");
			}
);

comboDinamico = function(estados, cidades, bairros) {

	var estado = document.getElementById(estados);
	var cidade = document.getElementById(cidades);
	var bairro = document.getElementById(bairros);

	$(estados).load('localizacoes.php?tipo=estado');
	$(estados).change(
		function() {
			if($(this).val() == 0) {
				alert('Você precisa informar o ESTADO!');
				$(this).focus();
			} else {		
				$(cidades).load('localizacoes.php?tipo=cidade&estado=' + $(this).val());
			}
		}
	);
	$(cidades).change(
		function() {
			if($(this).val() == 0) {
				alert('Você precisa informar a CIDADE!');
				$(this).focus();
			} else {		
				$(bairros).load('localizacoes.php?tipo=bairro&cidade=' + escape($(this).val()));
			}
		}
	);	

	$(bairros).change(
		function() {
			if($(this).val() == 0) {
				alert('Você precisa informar o BAIRRO!');
				$(this).focus();
			} else {		
				return true;
			}
		}
	);	
}

e por fim o código que monta os combobox

	switch($_GET['tipo'])
	{
		case 'estado' :
			$sql = mysql_query("SELECT * FROM estados_federacao")or die("Query invalida: " . mysql_error());
			while ($row = mysql_fetch_array($result)) {
     		$option = $row["uf"];
	 		$string = $row["estado"];
	 		echo "<option value=\"$option\">$string</option>";
   }
			break;
		case 'cidade' :
			$sql = mysql_query("SELECT * FROM municipios WHERE uf = '%uf'", $_GET['estado']);
     		$option = $row["nome_municipio"];
	 		$string = $row["nome_municipio"];
	 		echo "<option value=\"$option\">$string</option>";			
			break;			
		case 'bairro' :
			$sql = sprintf("SELECT * FROM municipios_bairros WHERE cidade = 'municipio'", ($_GET['cidade']));
     		$option = $row["bairro_id"];
	 		$string = $row["bairro"];
	 		echo "<option value=\"$option\">$string</option>";	
			break;			
	}

desde já agradeço pela ajuda

[André Manoel]

Acredito que o problema está no switch.

        $str = "";
        switch($_GET['tipo'])
        {
                case 'estado' :
                	
                        $result = mysql_query("SELECT * FROM estados_federacao")or die("Query invalida: " . mysql_error());
                        
                        while ($row = mysql_fetch_array($result)) {
	                		$option = $row["uf"];
	                        $string = $row["estado"];
	                        $str .= "<option value=\"$option\">$string</option>";
  						}
  						echo $str;
                        break;
                        
                case 'cidade' :
                        $result = mysql_query("SELECT * FROM municipios WHERE uf = '". $_GET['estado'] ."'") or die("Query invalida: " . mysql_error());;
                        
                        while ($row = mysql_fetch_array($result)) {
	                		$option = $row["nome_municipio"];
	                        $string = $row["nome_municipio"];
	                        $str .= "<option value=\"$option\">$string</option>";
                        }
						echo $str;	
                        
                        break;                  
                case 'bairro' :
                	
                        $result = mysql_query("SELECT * FROM municipios_bairros WHERE cidade = '". $_GET['municipios'] ."'" ) or die("Query invalida: " . mysql_error());;
                        
                        while ($row = mysql_fetch_array($result)) {
	                		$option = $row["bairro_id"];
	                        $string = $row["bairro"];
	                        $str .= "<option value=\"$option\">$string</option>";
                        }
                        
                        echo $str;
                        
                        break;                  
        }

[gnuclear]

fiz as alterações recomendadas porém ainda não funciona, eu acredito que o problema seja no javascript mesmo, estou usando o jquery mais recente.

[LeoB]

Aqui precisa de aspas:

var estado = document.getElementById('estados');
var cidade = document.getElementById('cidades');
var bairro = document.getElementById('bairros');

[gnuclear]

coloquei as aspas, mas ele ainda não está enviando os dados.

[LeoB]

O nome das variáveis está no singular, e mais pra baixo você está usando no plural. Conserte isso também. E se ainda não funcionar, poste aqui como está o código atualmente.

[gnuclear]

agora sim tive uma reação da página, realmente o problema deve estar ai, coloquei tudo no plural, agora o local onde se escolhe o estado fica totalmente em branco, não aparece nenhuma opção, antes tinham as opções definidas no arquivo HTML. Acredito que resolvendo isso, o resto funcione.

Como faço para as opções de estado voltarem???

[LeoB]

Acesse pelo seu navegador o caminho para:

localizacoes.php?tipo=estado

E diz pra gente o que aparece.

[gnuclear]

resultado:

ACREALAGOASAMAZONASAMAP�BAHIACEAR�DISTRITO FEDERALESP�RITO SANTOSGOI�SMARANH�OMINAS GERAISMATO GROSSO DO SULMATO GROSSOPAR�PARA�BAPERNAMBUCOPIAU�PARAN�RIO DE JANEIRORIO GRANDE DO NORTEROND�NIARORAIMARIO GRANDE DO SULSANTA CATARINASERGIPES�O PAULOTOCANTINS

[André Manoel]

Fiz algumas alterações no seu código javascript...

Vamos ver se melhora...

jQuery(document).ready
(
        function() 
        {
            //carrega a combo de estados na primeira vez que a página é carregada
        	$.get("localizacoes.php", { tipo: "estado" },
	     	    function(data){
	     	    	$("#estados").html(data);
     	   		}
       	    );

        	$("#estados").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar o ESTADO!');
                                    $(this).focus();
                            } else {
                            	    $.get("localizacoes.php", { tipo: "cidade", estado: $(this).val()},
                        	     	    function(data){
                        	     	    	$("#cidades").html(data);
                             	   		}
                               	    );                
                            }
                    }
            );//fim evento estados


        	$("#cidades").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar a CIDADE!');
                                    $(this).focus();
                            } else {   
                            		$.get("localizacoes.php", { tipo: "bairro", cidade: $(this).val()},
                        	     	    function(data){
                        	     	    	$("#cidades").html(data);
                             	   		}
                               	    );              
                            }
                    }
            );//fim evento cidades


        	$("#bairros").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar o BAIRRO!');
                                    $(this).focus();
                            } else {                
                                    return true;
                            }
                    }
            );        

      		            
        	          
        }
);

[gnuclear]

Bom, ele carrega as cidades, mas quando uma delas é escolhida, aparece um Alert repetindo o nome da cidade, e logo em seguida somem todos os valores do combobox cidade.

de onde vem esse alert que aparece agora?
porque o combobox fica fazio depois de ser selecionado?

Até agora estava funcionando da seguinte forma:

No box do estado era selecionado o estado, em seguida apareciam as opções de cidades no box das cidades, ao selecionar a cidade aparecia um alert informando a cidade, e o box das cidades ficava em branco.

tentei corrigir até onde eu sabia, agora funciona assim:

No box do estado era selecionado o estado, em seguida apareciam as opções de cidades no box das cidades, ao selecionar a cidade aparecia um alert informando a cidade, e logo em seguida os bairros estão sendo carregados no box destinado para as cidades, e não no box dos bairros.

se alguem poder me dar uma luz eu agradeço

[André Manoel]

Posta a codigo que você modificou para nós vermos.

[gnuclear]

vou colocar tudo

primeiro a parte do formulário:

 <select name="estados" id="estados" >
        <option selected="selected">-- Estados --</option>
      </select>
      <br />
      <select name="cidades" id="cidades" onChange="alert(this.value);" >
        <option>-- Escolha um Estado --</option> <!-- é aqui onde estão carregados as cidades e os bairros --->
      </select>
      <br />
      <select name="bairros" id="bairros">
        <option>-- Escolha uma Cidade --</option> <!-- é aqui onde os bairros DEVERIAM ser carregados --->
      </select>

O código em javascript

jQuery(document).ready
(
        function() 
        {
            //carrega a combo de estados na primeira vez que a página é carregada
                $.get("localizacoes.php", { tipo: "estado" },
                    function(data){
                        $("#estados").html(data);
                        }
            );

                $("#estados").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar o ESTADO!');
                                    $(this).focus();
                            } else {
                                    $.get("localizacoes.php", { tipo: "cidade", estado: $(this).val()},
                                            function(data){
                                                $("#cidades").html(data);
                                                }
                                    );                
                            }
                    }
            );//fim evento estados


                $("#cidades").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar a CIDADE!');
                                    $(this).focus();
                            } else {   
                                        $.get("localizacoes.php", { tipo: "bairro", cidade: $(this).val()},
                                            function(data){
                                                $("#cidades").html(data);
                                                }
                                    );              
                            }
                    }
            );//fim evento cidades


                $("#bairros").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar o BAIRRO!');
                                    $(this).focus();
                            } else {                
                                    return true;
                            }
                    }
            );        

                            
                          
        }
);

e por fim o código php que faz a pesquisa e monta o resultado, esse até onde sei está certinho, o único problema dele é com relação a acentuação.

$str = "";
        switch($_GET['tipo'])
        {
                case 'estado' :
                        
                        $result = mysql_query("SELECT * FROM estados_federacao")or die("Query invalida: " . mysql_error());
                        
                        while ($row = mysql_fetch_array($result)) {
                                        $option = $row["uf"];
                                $string = $row["estado"];
                                $str .= "<option value=\"$option\">$string</option>";
                                                }
                                                echo $str;
                        break;
                        
                case 'cidade' :
                        $result = mysql_query("SELECT * FROM municipios WHERE uf = '". $_GET['estado'] ."'") or die("Query invalida: " . mysql_error());;
                        
                        while ($row = mysql_fetch_array($result)) {
                                        $option = $row["nome_municipio"];
                                $string = $row["nome_municipio"];
                                $str .= "<option value=\"$option\">$string</option>";
                        }
                                                echo $str;      
                        
                        break;                  
                case 'bairro' :
                        
                        $result = mysql_query("SELECT * FROM municipios_bairros WHERE municipio = '". $_GET['cidade'] ."'" ) or die("Query invalida: " . mysql_error());;
                        
                        while ($row = mysql_fetch_array($result)) {
                                $option = $row["bairro_id"];
                                $string = $row["bairro"];
                                $str .= "<option value=\"$option\">$string</option>";
                        }
                        
                        echo $str;
                        
                        break;                  
        }

Desde já agradeço pela ajuda

[LeoB]

No evento change dos estados, você está carregando os dados em #cidades. E no evento change das cidades, você está carregando em #cidades também. Por isso carrega no lugar errado.

[gnuclear]

Resolvido, agora funciona perfeitamente, quero agradecer a todos que colaboraram, LeoB e Andre Manoel.

O código não é meu, então vou colocar ele aqui para ajudar quem possa precisar

FORMULÁRIO:

<select name="estados" id="estados" >
        <option selected="selected">-- Estados --</option>
      </select>
      <br />
      <select name="cidades" id="cidades" onChange="alert(this.value);" >
        <option>-- Escolha um Estado --</option>
      </select>
      <br />
      <select name="bairros" id="bairros">
        <option>-- Escolha uma Cidade --</option>
      </select>

JavaScript que preenche os combobox:

jQuery(document).ready
(
        function() 
        {
            //carrega a combo de estados na primeira vez que a página é carregada
                $.get("localizacoes.php", { tipo: "estado" },
                    function(data){
                        $("#estados").html(data);
                        }
            );

                $("#estados").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar o ESTADO!');
                                    $(this).focus();
                            } else {
                                    $.get("localizacoes.php", { tipo: "cidade", estado: $(this).val()},
                                            function(data){
                                                $("#cidades").html(data);
                                                }
                                    );                
                            }
                    }
            );//fim evento estados


                $("#cidades").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar a CIDADE!');
                                    $(this).focus();
                            } else {   
                                        $.get("localizacoes.php", { tipo: "bairro", cidade: $(this).val()},
                                            function(data){
                                                $("#bairros").html(data);
                                                }
                                    );              
                            }
                    }
            );//fim evento cidades


                $("#bairros").change(
                    function() {
                            if($(this).val() == 0) {
                                    alert('Você precisa informar o BAIRRO!');
                                    $(this).focus();
                            } else {                
                                    return true;
                            }
                    }
            );        

                            
                          
        }
);

Arquivo PHP que faz a pesquisa e monta as opções:

// coloque aqui a conexão com o banco de dados
	$str = "";
        switch($_GET['tipo'])
        {
                case 'estado' :
                        
                        $result = mysql_query("SELECT * FROM estados_federacao")or die("Query invalida: " . mysql_error());
                        
                        while ($row = mysql_fetch_array($result)) {
                                        $option = $row["uf"];
                                $string = $row["estado"];
                                $str .= "<option value=\"$option\">$string</option>";
                                                }
                                                echo $str;
                        break;
                        
                case 'cidade' :
                        $result = mysql_query("SELECT * FROM municipios WHERE uf = '". $_GET['estado'] ."'") or die("Query invalida: " . mysql_error());;
                        
                        while ($row = mysql_fetch_array($result)) {
                                        $option = $row["nome_municipio"];
                                $string = $row["nome_municipio"];
                                $str .= "<option value=\"$option\">$string</option>";
                        }
                                                echo $str;      
                        
                        break;                  
                case 'bairro' :
                        
                        $result = mysql_query("SELECT * FROM municipios_bairros WHERE municipio = '". $_GET['cidade'] ."'" ) or die("Query invalida: " . mysql_error());;
                        
                        while ($row = mysql_fetch_array($result)) {
                                $option = $row["bairro_id"];
                                $string = $row["bairro"];
                                $str .= "<option value=\"$option\">$string</option>";
                        }
                        
                        echo $str;
                        
                        break;                  
        }