Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Carregando dados no Select com jQuery e Ajax

Olá pessoal como diria o bom e velho Exterminador  “i’ll be back!”, ao poucos vou terminando de ajustas as coisas da casa e postar coisas novas, então vamos lá. Sabe quando você precisa de carregar algum(s) dados em um campo de selecet do seu documento e acha aqueles códigos enormes de ajax?

Pois seus problemas acabaram! Trago para vocês um carregamento simples com jQuery e PHP, esqueça aqueles códigos enormes e problemas de acentuação com algumas técnicas de jQuery e PHP seus problemas já eram.

Vamos logo ao que interessa, para nossa “receita” de hoje vamos precisar de:

Ingredientes:
1-Biblioteca do jQuery.
2-Arquivos tipo .php.
2-Selects, um onde terá os dados por exemplo do estado e outro que será carregado as cidades.
1-um banco de dados a gosto.

Modo de preparo
Abra um novo documento de PHP e dê o nome que quiser, nele inclua a biblioteca jQuery com a seguinte tag:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Lembre-se de deixar tudo na mesma panela, digo pasta, em seguida vamos ao select, crie dois selects onde um será o que contem os dados e o outro o que receberá logo teremos:

<select name="passaValor" id="passaValor" onchange="getValor(this.value, 0)">
   <option value="0">Selecione algo</option>
   <option value="1">Primeiro Valor</option>
   <option value="2">Segundo Valor</option>
  <option value="3">Terceiro Valor</option>
</select>

E outro que recebrá os dados passados pela função do de cima:

<select name="recebeValor" id="recebeValor" >
    <option value="0">Selecione algo acima primeiro</option>
</select>

Lembre-se que estes selects estão abaixo ta tag <body> do seu documento,a gora acrescente cuidadosamente o seguinte código, não misture muito para não perder o gosto.

<script type="text/javascript">
   function getValor(valor){
     $("#recebeValor").html("<option value='0'>Carregando...</option>");
     setTimeout(function(){
          $("#recebeValor").load("ajaxValor.php",{id:valor})
   }, 2000)
};
</script>

Explicando o código:

Criamos a função chamada de “getValor” que recebe alguma coisa “valor” daí mudamos o html do que bvei receber os dados para carregando, em seguida usamos o setTimeout do javascript para dar um “dele” um tempinho de 2 segundos para que fique tudo pronto e carregado depois, em seguida usamos a função load do jQuery que substitui o velho Ajax gigantesco, por padrão ele recebe:

$("#ondeVaiCarregar").load.("pagina_carregada.php #seletor", {parametros:valor})

Isso significaria:

pagina_carregada.php?parametros=valor

E será exibido tudo dentro do seu seletor e apenas o que foi determinado no #seletor, magia? Macumba? Não é jQuery.

Continuando, vamos para a página onde irá buscar do banco o valor que passamos, nesta página eu pego o valor passado por POST e faço uma busca no banc de dados, montando os campos do select um em baixo do outro veja:

//Conecta ao Banco
$conexao = mysql_connect("localhost", "usuario", "senha")
or die ('Não foi possivel conectar ao banco porque; ' . mysql_error());
$db = mysql_select_db("banco") or die ("Banco de Dados Inexistente");
$id = $_POST["paramentros"];
$sql = "SELECT * FROM seuBanco WHERE idTabela = '$id'";
$totalBusca = mysql_query($sql);

while( $linha = mysql_fetch_assoc($totalBusca) ){
     echo "<option value='".$linha["idTabela"]."'>".htmlentities($linha["outroDado"])."</option>\n";
}

Para aqueles que conhecem de PHP nada de novo né? Bom uma rápida passadinha,nas quatro primeira instruções conexão ao banco de dados básicas, as próximas três isntruções eu recupero o valor passado via POST, monto a consulta e depois a executo, em seguida crio um “loop” onde vou imprimindo as opções do SELECT que vai recebe-las. Agora uma dica legal, para não ter problemas com acentuaçào utilize a função htmlentities(); do PHP, ela converte os caracters UTF e ISO, para maiores detalhes consulte o manual do PHP aqui.

Agora basta testar, e “voilà” aqui está seu combo trazendo as cosas certinhas, macumba? Magia ? Não é jQuery facilitando sua dúvida, caso queira aqui está um teste sem consulta no banco, baixe e brinque bastante, dúvidas estarei aqui.

Até mais pessoal!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (73)

  • Gostei da receita vc é o cara!!!

  • Tiago disse:

    Olá, finalmente acuei algo sobre populate dropdown, mas infelizmente não consegui intender muita coisa, apesar de estar muito bem explicado.
    Preciso fazer igual ao do exemplo que está para download, só que vindo do bando de dados, não estou conseguindo fazer pois não entendo quase nada de programação php nem jquery, tem como me dar uma forca?
    por exemplo, estou querendo pegar do bando de dados chamado busca, haverá um formulário com varias selects mais só um vem resultados depois de selecionar o outro, por exemplo, ao selecionar no campo cidade a cidade desejada, aparece em outro select os bairros respectivos daquela cidade, e de um select estado, ao selecionar o estado aparece a lista do select as cidades respectivas a aquele estado. tudo vindo do bando de dados.
    Teria como me ajudar amigo?
    Estou em busca disso a 2 meses que nem um doido.
    estou no aguardo, até logo

  • Adriano Meira disse:

    Olá Tiago, claro que posso te ajudar mas vamos precisar de algum tempo aqui para lhe explicar, seria interessante falarmos por skype para poder lhe explicar melhor. Vou lhe enviar um e-mail com o meu usuário e marcamos um horário nesta semana ok? Até mais.

  • Rodrigo disse:

    Olá Adriano!
    Kra… estou a procura disso faz tempo, já testei diversos códigos e o seu foi de longe o mais limpo, pratico e funcional! simplesmente fantástico! muito obrigado por compartilhar isso 😉

    Ainda não testei com o banco de dados (mas acho q não haverá problemas), baixei a versão sem consulta para testar e não funcionou, ela traz o value do mas não seu conteudo, desconfiei da função htmlentities(); pois nunca havia visto, substitui por utf8_encode e funcionou como magica! hehehe

    Vou colocar a alteração que fiz no seu código para vc ve:
    if( $id == 0 ){
    echo “Nada escolhido”;
    } else if ($id == 1){
    echo “”.utf8_encode(“Carregado opção 1 – um”).””;
    echo “”.utf8_encode(“Carregado opção 1 – dois”).””;
    echo “”.utf8_encode(“Carregado opção 1 – três”).””;

    } else if ($id == 2){
    echo “”.utf8_encode(“Carregado opção 2 – um”).””;
    echo “”.utf8_encode(“Carregado opção 2 – dois”).””;
    echo “”.utf8_encode(“Carregado opção 2 – três”).””;
    }

    Mais uma vez, obrigado!

  • João Vitor disse:

    Adriano , boa tarde.
    Achei interessante sua implementação , mas sinceramente não consegui faze-la funcionar…
    O que eu preciso:
    Tenho lá um select com o name = “cod_prod” – “Código do produto: ” 1 , 2 , 3 , etc…
    Gostaria de quando clicar no “1” por exemplo fizesse …
    select qtd_item from produtos where cod_produto = $cod_prod
    E me retornasse apenas a quantidade…

  • Adriano Meira disse:

    Olá João Vitor

    Cara se entendi bem, o problema está na sua SQL, para retornar o total de itens da tabela “qtd_item” buscando pelo “$cod_prod”, você precisa contar os resultados, tente usar a função count do php. Isso pode variar de acordo como está buscando as coisas no banco de dados.

    Neste exemplo a página “pagina_carregada.php”, pode ser modificado conforme o que deseja mostrar para o usuário, o que você colocar nesta página como “echo” vai ser impresso no retorno da função “load”. Outra dica de uma olhadinha neste outro post onde explico como usr a função ajax do jquery, bem mais eficiente e segura 😉

    Até mais.

  • Adriano Meira disse:

    Opa obrigado Rodrigo pela dica e pelo aviso dos comentários 😉

  • Rafael Pedroso disse:

    Olá Adriano

    Estou com problemas, tenho as selects de estado e cidades, mas não está carregando as cidades quando seleciono o estado.
    Estou desenvolvendo um site para um cliente e não consigo achar o erro.
    Fora do site que estou desenvolvendo ele funciona bonitinho, tudo normal, mas quando está “dentro” do site não funciona, apenas aparece carregando.

    Se puder me responder por e-mail, eu agradeço,
    E-mail: rafael.rpc@hotmail.com

  • Adriano Meira disse:

    Olá Rafael

    Cara me passa o link do seu site on-line para eu tentar debugar, mas antes de uma conferida no caminho do arquivo que busca as cidades. Aconselho também a dar uma olhadinha neste outro artigo http://www.adrianomeira.com/blog/usando-a-funcao-ajax-do-jquery onde falo da função ajax, onde seu controle é mais preciso e as chandes de falharem são menores.

    Até mais!

  • mauroslucios disse:

    Boa noite Adriano,
    Estou criando um site consultecimobiliaaria.com.br onde tenho um formulário de busca com select e option e não o campo input onde digitamos a busca, por acaso vc tem algum tutorial sobre isto?

  • mauroslucios disse:

    Estou usando este tutorial, muito bom!.

  • Lucas disse:

    Muito interessante… Estou embarcando na linguagem PHP/JAVASCRIPT/JQUERY tem pouco tempo e depois de horas procurando sobre esse assunto consegui resolver meu problema. Vlw Adriano!

  • Daniele Dantas disse:

    E se o primeiro campo fosse um input para digitar nome de Vendedor e no combobox ter que retornar as filiais que ele atende?

  • Adriano Meira disse:

    Olá Daniele, sim você pode coloca um campo de input para digitar, no meu exemplo uso a função “onChange” do campo select para poder acessar a função e fazer a pesquisa, vocÊ pode utilizar a função de keyUp do jQuery para poder pegar os valores digitados no campo e chamar a função de pesquisa dese exemplo.

  • Thiago disse:

    como eu faria assim, sem banco de dados

    Cidade 1
    Cidade 2
    etc

    Que apareceriam assim:

    Bangu
    Campo Grande
    Barra da Tijuca
    Ipanema

  • Adriano Meira disse:

    Olá Tiago, sem banco de dados você pode criar um arquivo com alguns arrays de PHP contendo as respostas, assim ao selecionar uma cidade você passa um parâmetro (POST ou GET), com o valor deste array, assim você imprime o array. Veja o manual de Aray do PHP em http://php.net/manual/pt_BR/language.types.array.php para poder trabalhar com eles e fazer loopings.

    Até mais!

  • Alysson disse:

    Olá Adriado,
    Como faço para fazer a mesma coisa, mas sem precisar criar o pagina_carregada.php? Ou seja chamar uma função php que fará o mesmo, estando na mesma página do combobox?

  • Adriano Meira disse:

    Olá Alysson

    Infelizmente não tem como você chamar uma função do PHP, pois são linguagens diferentes.

  • Gustavo Lima disse:

    Estou tendo problemas ao resgatar os valores do BD, devo criar alguma outra pagina para isso?

  • Adriano Meira disse:

    Olá Gustavo

    Não precisa criar uma nova página não, se na página, neste tutorial a página “ajaxValor.php” tem a conexão com o banco de dados e lá faço o looping para chamar os dados, existe outro artigo que escrevi sobre o assunto usando uma função ainda melhor, veja neste link qualquer dúvida só mandar ai!

  • Thiago Daniel disse:

    Puts meu irmão, perfeito, exatamente o que eu queria, abraços

  • Daniel da Silva disse:

    Boa tarde.
    Tem alguma forma de fazer sem uso do arquivo .php?

  • Ivo Souza disse:

    Muito bom esse código, pela explicação nem tentei peguei o exemplo que está funcionando, e coloquei o seguinte código para minha aplicação buscar na base de dados, da para usar o id direto ou usar até um like buscando vários nomes.

    $sql = mysql_query(“select * from banco_dados where id = ‘$id'”);
    $qtd = mysql_num_rows($sql);

    if( $qtd > 0 ){
    while($l = mysql_fetch_array($sql)) { extract($l);
    echo ”.$nome.”;
    }
    }
    else {
    echo “Dados Nao Encontrado”;
    }

    Obrigado pela Dica e parabéns

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...