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!
Tweet |
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
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!
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…
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
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?
Estou usando este tutorial, muito bom!.
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!
E se o primeiro campo fosse um input para digitar nome de Vendedor e no combobox ter que retornar as filiais que ele atende?
como eu faria assim, sem banco de dados
Cidade 1
Cidade 2
etc
Que apareceriam assim:
Bangu
Campo Grande
Barra da Tijuca
Ipanema
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?
Estou tendo problemas ao resgatar os valores do BD, devo criar alguma outra pagina para isso?
Puts meu irmão, perfeito, exatamente o que eu queria, abraços
Boa tarde.
Tem alguma forma de fazer sem uso do arquivo .php?
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
Gostei da receita vc é o cara!!!