[Resolvido] Problemas com jSON(), porque? - jQuery

programation · Outubro 25, 2011

Olá pessoal, tudo bem?

Eu tenha uma função $.get() - está em comentários - onde a uso pela plataforma jQuery - Javascript, está função vai até o código PHP&MySQL que faz uma consulta no DB e retorna os valores - porém não funciona.

Notei que os dados precisam ser tratados pela função jSON(); já li vários artigos, mas não estou conseguindo montar as linhas de códigos nem na parte do jSON() e nem nos códigos PHP. Estou estudando está função, mas não estou conseguindo aplica-lá nos código PHP porque realmente não estou conseguindo entender como ela funciona e nem como os dados são retornados.

Estes são os dois arquivos com os códigos que tenho, preciso transformar o que está em comentários - porque não funciona - em jSON(), e o arquivo em PHP tem que ser modificado, já tentei mas não consigo fazer funcionar.

Se alguém puder montar pra mim com base nestes código como ficaria usando a função jSON() e como os dados seriam retornados, eu ficaria muito grato.

Preciso fazer funcionar essa parte para poder prosseguir com os meus estudos, mas realmente não consigo.

Agradeço desde já!

html


<form name="consulta" method="post" action="pesquisar_imovel.php">
				<tr>
					<td style="text-align:center; vertical-align:middle;">
                       	<input type="text" name="c_codigoi" value="" />
                       </td>
					<td style="text-align:center; vertical-align:middle;">
						<select style="width:65px" name="estado" id="estado">
							<option value="">Estado</option>
              					<?php buscar_estado(); ?>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;" id="td_cidade">
						<select style="width:140px" name="cidade" id="cidade" disabled="disabled">
							<option value="">Cidade</option>
						</select>
					</td>

Javascript - jQuery

//existem mais código acima que não são necessários mostrar aqui


/* cabeçalho */

//buscar cidade
   $('#estado').change(function() {							
	/*$.get("busca_cidade.php", { estado: consulta.estado.value }, function(result){
		$("#cidade").html(result);
       	}); */

	//habilitando e desabilitando campo cidade
	if(consulta.estado.value == '') {
   		$('#cidade').attr('disabled', true);
  			$('#bairro').attr('disabled', true);
  			$('#tipo').attr('disabled', true);
  			$('#vl').attr('disabled', true);

           $('#cidade').html('<option value="">Cidade</option>');
         	$('#bairro').html('<option value="">Bairro</option>');
			$('#tipo').html('<option value="">Tipo</option>');
         	$('#vl').html('<option value="">Comprar e Alugar</option>');
	}
	else								
       	$('#cidade').attr('disabled', '');
});

PHP


<?php		
include("conect.php");

include("function_php.php");

$estado		= $_GET["estado"];

$con		= mysql_query("SELECT DISTINCT(cidade) FROM imoveis WHERE estado = '$estado'");
$num_con 	= mysql_num_rows($con);

if($num_con == 0)
{
	echo '<option value="">Cidade</option>';
}
else
{
	echo '<option value="">Cidade</option>';

	for($i=0; $i<$num_con ; $i++)
	{
		$r		= mysql_fetch_array($con);
		echo 	"<option value='$r[0]'>$r[0]</option>";
	}
}
?>

(desculpe-me se não consegui ser muito claro, qualquer coisa estou aqui)

William Bruno · Outubro 25, 2011

combo de estados + cidades com jSON?

veja:

http://wbruno.com.br/blog/2009/10/06/combos-dependentes-ajax-jquery/

está bem simples, e é exatamente oque você procura.

programation · Outubro 25, 2011

Sim, isso mesmo.

Tentei implantar este código no meu mas não deu certo.

Ficou assim:

Javascript - jQuery


$(document).ready(function(){//inicio o jQuery

       	$("select[name='estado']").change(function(){

			var estado = $(this).val();//pegando o value do option selecionado
           	alert(estado);//apenas para debugar a variável

               $.getJSON('busca_cidade.php', {estado: estado}, function(data){
                   	alert(data);//apenas para debugar a variável

                       var option = new Array();//resetando a variável

                       resetaCombo('cidade');//resetando o combo

                       $.each(data, function(i, obj){

                           option[i] = document.createElement('option');//criando o option
                           $( option[i] ).attr( {value : obj.cidade} );//colocando o value no option
                           $( option[i] ).append( obj.cidade );//colocando o 'label'

                           $("select[name='cidade']").append( option[i] );//jogando um à um os options no próximo combo

						$('#cidade').attr('disabled', '');
                   });
               });
           });
       });

       /* função pronta para ser reaproveitada, caso queria adicionar mais combos dependentes */
       function resetaCombo( el )
       {
               $("select[name='"+el+"']").empty();//retira os elementos antigos
               var option = document.createElement('option');
               $( option ).attr( {value : '0'} );
               $( option ).append( 'Escolha' );
               $("select[name='"+el+"']").append( option );
       }

PHP


<?php

 	include("conect.php");

       function intGet( $campo ){
               return isset( $_GET[$campo] ) ? $_GET[$campo] : 0;
       }

       function retorno( $estado )
       {
               $sql	= "SELECT DISTINCT(cidade) FROM imoveis WHERE estado = '$estado'";

               $q		= mysql_query( $sql );

               $json	= ' [';

               if(mysql_num_rows($q) > 0)
               {
                       while($dados = mysql_fetch_array($q))
                       {
                               $json .= ' { "cidade" : " '.$dados[0].' " ';
					}
               }
               else
                       $json .= ' { "cidade" : "Não Encontrado" } ';

               $json .= ' ]';

               return $json;
       }

       echo retorno( intGet('estado') );
?>

( Funcionou até o alert(estado); )

William Bruno · Outubro 25, 2011

debugue:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

http://wbruno.com.br/blog/2011/04/14/como-debugar-ajax-firebug/

programation · Outubro 25, 2011

Visitei os links que você me passou, e por mais que eu tente fazer o que me pediu, eu ainda continuo a não encontrar o erro.

Alguém tem mais alguma sugestão?

Só consegui perceber pelo Debugue que os dados estão sendo retornados até um certo ponto porque o Debugue me retorna pelo menos isso { "cidade" : " São José dos Campos " } - eu só tenho este dado no DB a ser retornado até o momento -, mas por exemplo, quando ele entra na função $.getJSON - se é que ele realmente entra - o alert() que coloquei para testar não funcionou.

Grato!

William Bruno · Outubro 25, 2011

do começo então.

Se você acessar diretamente, assim:

http://www.wbruno.com.br/scripts/combos-dependentes-function.inc.php?idCombo1=1

aparece um jSON parecido com esse meu ?

se não, corrija o php.

programation · Outubro 25, 2011

do começo então.

Se você acessar diretamente, assim:

http://www.wbruno.co....php?idCombo1=1

aparece um jSON parecido com esse meu ?

se não, corrija o php.

Se eu digitar assim http://localhost/mds...e.php?estado=SP ele irá retornar isso:

Chrome mostra assim:

[

-{
- cidade: " São José dos Campos "
}

]

IE mostra assim:

[ { "cidade" : " São José dos Campos " } ]

O meu código Javascript - jQuery não precisei mexer até o momento, mas o meu código PHP está assim agora:

PHP

<?php		
include("conect.php");

       function intGet( $campo ){
               return isset( $_GET[$campo] ) ? $_GET[$campo] : 0;
       }

       function retorno( $estado )
       {
               $sql	= "SELECT DISTINCT(cidade) FROM imoveis WHERE estado = '$estado'";

               $q		= mysql_query($sql);

               $json	= ' [';

               if(mysql_num_rows($q) > 0)
               {
                       while($dados = mysql_fetch_array($q))
                       {
                               $json .= ' { "cidade" : " '.$dados[0].' " } ';
					}
               }
               else
                       $json .= ' { "cidade" : "Não Encontrado" } ';

               $json .= ' ] ';

               return $json;
       }

       echo retorno( intGet('estado') );
?>

William Bruno · Outubro 25, 2011

nesse:

 function(data){
                       alert(data);//apenas para debugar a variável

aparece esse mesmo jSON ?

aparece algo no console de erros ? Ctrl+Shift+J ?

programation · Outubro 25, 2011

não aparece nada ainda

não aparece nada ainda

Eu mudei o código PHP somente nessas partes que citei com comentários, e sim funcionou o alert(data) - e também desabilitou o campo $('#cidade').attr('disabled', ''); com a seguinte resposta: [ object Object ]

( Porém, o este alert só funciona no IE e não no Chrome )

PHP


$json	= ' '; // AQUI

               if(mysql_num_rows($q) > 0)
               {
                       while($dados = mysql_fetch_array($q))
                       {
                               $json .= ' { "cidade" : " '.$dados[0].' " } ';
					}
               }
               else
                       $json .= ' { "cidade" : "Não Encontrado" } ';

               $json .= ' '; // AQUI

William Bruno · Outubro 25, 2011

o chrome tb tem um console de erros. Verifique se aparece algo nele.

além disso, force um header com utf8, para "cuspir" o jSON corretamente.

Veja que o exemplo online funciona, você precisa mecher e entender o código até fazer funcionar localmente ai pra você.

programation · Outubro 25, 2011

sim sim, todos os meus arquivos vem com include("conect.php"); que já vem com o header utf-8

conect.php


<?php
header("Content-Type: text/html; charset=utf-8",true);

session_start();

// Este arquivo conecta um banco de dados MySQL - Servidor = localhost

$host = "localhost";

$dbname = "mds"; // Indique o nome do banco de dados que será aberto

$usuario = "root"; // Indique o nome do usuário que tem acesso

$password = ""; // Indique a senha do usuário	

//1º passo - Conecta ao servidor MySQL

$conect = mysql_connect($host,$usuario,$password);

//2º passo - Seleciona o Banco de Dados

mysql_select_db($dbname);
?>

No Chrome está dando o mesmo erro (passei a informação errada).

No exemplo que você me passou, o PHP retornava dois valores:

$json .= '{"nome'.$campo.'":"'.$dados->nome.'","id'.$campo.'":"'.$dados->id.'"}, '; //$json .= '{"nome'.$campo.'":"'.$dados['nome'].'","id'.$campo.'":"'.$dados['id'].'"}, ';

e o meu só retorna o valor da cidade:

$json .= ' { "cidade" : " '.$dados[0].' " } ';

William Bruno · Outubro 25, 2011

todas as mensagens de erro do php estão habilitadas?

ini_set( 'display_errors', true );
error_reporting( E_ALL );

acabei de lembrar de mais uma coisa. Pode ser problema por causa dos acentos.

Em vez de fazermos o jSON na mão, use a função json_encode para cuspir os dados.

atualizei o post lá:

$json[] = Array('nome'=> utf8_encode( $dados->nome ), 'id'=> $dados->id);

http://wbruno.com.br/blog/2009/10/06/combos-dependentes-ajax-jquery/

programation · Outubro 25, 2011

Vou ser sincero comigo mesmo em dizer isso: Eu não estou entendendo mais nada!

Estou a a 2 dias tentando resolver esse problema, e por causa dele não consigo prosseguir nos meus estudos.

Você não tem alguma vídeo aula pra me recomendar?

Eu tenho mesmo que usar está função jSON() para funcionar tudo isso?

Eu tenho mesmo que usar a função document.createElement('option');?

Desculpe-me, mas estou com estas dúvidas básicas na minha cabeça.

(preciso fazer algo igual a estes selects:http://www.br.brookfield.com/SP)

William Bruno · Outubro 25, 2011

Você não tem alguma vídeo aula pra me recomendar?

não.

Eu tenho mesmo que usar está função jSON() para funcionar tudo isso?

sim

Eu tenho mesmo que usar a função document.createElement('option');?

sim.

vá novamente ao post do meu blog, e pegue todo o código que atualizei lá.

programation · Outubro 25, 2011

Hm, então não tem jeito, tenho que continuar persistindo em conseguir dessa forma mesmo.

Ok, eu preciso ficar off por um tempo, mas irei fazer o que pediu hoje mesmo e volto a postar aqui de noite e amanhã caso necessário de manhãzinha.

Agradeço desde já!

programation · Outubro 26, 2011

Consegui pessoal!

Só que tem um porém, todos os selects enviam somente um valor para o servidor retornar depois em jSON, exceto o ultimo select do qual irei postar agora:

A lógica/programação para de enviar somente um valor para o servidor, eu já sei - graças ao site do William Bruno - mais e para dois valores? Como faço para enviar dois valores para o servidor e fazer com que o servidor me retorne estes dois valores em jSON?

HTML


					<td style="text-align:center; vertical-align:middle;" id="td_bairro">
						<select style="width:165px" name="bairro" id="bairro" disabled="disabled">
							<option value="">Bairro</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select style="width:123px" name="tipo" id="tipo" disabled="disabled">
							<option value="">Tipo</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select style="width:133px" name="vl" id="vl" disabled="disabled">
							<option value="">Comprar e Alugar</option>
						</select>
					</td>

Javascript - jQuery

$("select[name='tipo']").change(function(){  

   	var campo = $(this).val();
	var campo2= $('#bairro').val();

       $.getJSON('busca_vl.php', {campo: campo, campo2: campo2}, function(data){
           var option = new Array();

           resetaCombo('vl');

           $.each(data, function(i, obj){
			option[i] = document.createElement('option');//criando o option  
           	$( option[i] ).attr( {value : obj.valor} );//colocando o value no option  
           	$( option[i] ).append( obj.objeto );//colocando o 'label'  

           	$("select[name='vl']").append( option[i] );//jogando um à um os options no próximo combo
  			});

		//habilitando e desabilitando campo cidade				
		if(campo == '') {
			$('#vl').attr('disabled', true);

			$('#vl').html('<option value="">Comprar e Alugar</option>');
		}
		else								
			$('#vl').attr('disabled', '');

       });  
});

PHP


<?php
include("conect.php");

 	//pegando valor campo
   if( isset($_GET['campo']) )
	$campo	= $_GET['campo'];
else
	$campo	= '';

//pegando valor campo2
   if( isset($_GET['campo2']) )
	$campo2	= $_GET['campo2'];
else
	$campo2	= '';

   function retorno( $tipo, $bairro ){  
       $sql = "SELECT DISTINCT(vl) FROM imoveis WHERE bairro = '$bairro' AND tipo = '$tipo'";  

       $q = mysql_query($sql);
	$num = mysql_num_rows($q);

       $json = Array();

       if($num > 0 ){  
           while($dados = mysql_fetch_array($q)){
			$valor	= $dados[0];
			if($valor == 1)
               	$json[] = Array('valor' => '1', 'objeto' => 'Venda');
			elseif($valor == 2)
               	$json[] = Array('valor' => '2', 'objeto' => 'Locação');
			else
               	$json[] = Array('valor' => '3', 'objeto' => 'Venda e Locação');
           }  
       }  
       else
           $json[] = Array('objeto' => ''); // ELE PARA AQUI ****************************

       return json_encode( $json );  
   }

echo retorno($campo, $campo2);
?>

Quando eu mesmo vou ao localhost e etc, e depois digito isso: busca_vl.php?campo=Apartamento&campo2=Jardim Aquários, o próprio navegador faz isso por causa do espaço em branco: ...tamento&campo2=Jardim%20AquÃ¡rius // agora está com a informação correta, o navagador faz isso Jardim%20AquÃ¡rius

Será que é por causa disso que ele está dando problema e não consegue encontrar o valor que solicitei no SQL?

Tenho uma observação; o Collation do meu DB é utf8_general_ci e pelo menos o valor que estou procurando fica + ou - assim no DB (bairro): Jardim AquÃirius.

( Todas as páginas tem um header("Content-Type: text/html; charset=utf-8", true); )

William Bruno · Outubro 26, 2011

cara, está correto tudo oque você fez.

Para enviar 2 valores, é só separar com virgula mesmo.

oq você deve preencher no navegador, é o value dos teus options. No value está "Jardim Aquários" ? ou está um ID?

Abra a aba REDE -> XHR do Firebug, e veja se o ajax está enviando os valores e retornando oque você queria.

pelo que vi aqui, está tudo certo. Qual o problema?

programation · Outubro 26, 2011

O problema que notei foi que quando os dados chegam ao servidor/códigos PHP, no mínimo o valor do Jardim Aquários fica assim Jardim%20AquÃ¡rius e por causa disso o SQL não consegue encontrar o imóvel.

É isso que percebi pelo Firebug e pelo código fonte.

No value dos meus options está o valor normal, sem ID, que no caso ficaria assim: <option value="Jardim Aquários">Jardim Aquários</option>

William Bruno · Outubro 26, 2011

e você não pode trabalhar com IDs ?

assim esse tipo de quebra não ocorreria.

programation · Outubro 26, 2011

Para facilitar eu fiz dessa forma e até o momento estava dando tudo certo, só apareceu este problema momento em que eu precisei enviar dois valores via jSON

Arquivado

[Resolvido] Problemas com jSON(), porque? - jQuery

Recommended Posts

programation 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

programation 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

programation 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

programation 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

programation 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

programation 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

programation 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

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

programation 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

programation 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

programation 0