Carregando dados no Select com jQuery e Ajax
Categoria jQuery, php | 19/11/2009Olá 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!
Isso pode ser interresante para você:
Comente este artigo você também!
Comentários (18)
-
Que bom que gostou cara, eu to estudando muito o jQuery fique atento logo vo postar mais coisas!
-
Uerlen disse:
Parabens pelo post meu caro! Ajudou de montão em meu trabalho. Parabens
-
Olá Uerlan, que bom que te ajudei se precisar de algo mais posta ai! Ps.: Desculpe a demora…
-
FlávioLS disse:
parabéns!!!!!!!!!!
foi uma mão na roda, justamente o que eu precisava
-
Carregando Select sem reflesh disse:
Adriano, gostei muito realmente está show fiz uns testes e realmente funciona é o que procuro fazer a muitos dias, só que eu já tenho uma página de Cadastro com dois list/menu dinâmicos, um de Atividade e outro de SubAtividade, já tenho no recordset a filtragem correta visto no teste dentro do recordset referente as SubAtividades, ou seja, quando digito Alimentos e Bebidas filtra as subativiades referentes a Alimentos e Bebidas, tá funcionando beleza mesmo.Minha dúvida é a seguinte, quando estou efetuando o cadastro na página,selecionao a atividade, mas no list/menu subativiade não está filtrando nada, gostaria de um exemplo usando dreamweaver cs3 ou cs4.
Desde já te agradeço a força, pois como já disse estou a vários dias buscando isso na internete e não consigo.
Valeu!!!! -
Olá Amigão se entendi bem parece que em algum lugar do seu formulário não funciona, acredito que seja apenas chamadas do jQuery, mas me posta ai ou me envia via e-mail seu código da página de cadastro, assim posso ver melhor onde possa estar o erro. De qualquer forma vai rodar nos dreamweaver cs3 ou cs4, eu prefiro usar na código puro assim sei onde olhar vai ai a dica! =)
-
Adriano, acesse:www.guiaregionalpb.com.br, vá em cadastre sua empresa, Cadastre-se grátis e veja o formulário que me refiro.
Adriano Meira: Removi seu código por ser muito extenso, mas ele está salvo em minha máquina.
-
Olá Hélio vi que sua aplicação chama todos as Atividade e Sub-atividade, tente fazer o seguinte não chame todos as sub-atividades de ao select um “id” que vai pesquisar na tabela de sub-atividades os id correspondentes a Atividade.
Veja no tutorial a parte que fala sobre a “pagina_carregada.php” é ali que vai fazer a consulta e retornar as sub-atividades, se tiver dúvida me mande um backup das tabelas de atividade e sub-atividade para que eu possa lhe ajudar.
Abraços até!
-
Adriano, me desculpe, mas eu não sei fazer backup no banco mysql, aquí vai as estruturas das duas tabelas ok? veja o que você pode fazer para me ajudar.valeu meu irmão.
Até mais!!!
Atividade
Campo Tipo Nulo Padrão Comentários
id_Atividade int(11) Não
Atividade varchar(100) Sim NULLÍndices:
Nome chave Tipo Único Packed Campo Cardinalidade Collation Nulo Comment
PRIMARY BTREE Sim Não id_Atividade 46 A
Atividade BTREE Sim Não Atividade 46 A YESSubAtividade
Campo Tipo Nulo Padrão Links para Comentários
id_SubAtividade int(11) Não
SubAtividade varchar(100) Sim NULL
Atividade varchar(100) Sim NULL Atividade -> AtividadeÍndices:
Nome chave Tipo Único Packed Campo Cardinalidade Collation Nulo Comment
PRIMARY BTREE Sim Não id_SubAtividade 957 A
SubAtividade BTREE Sim Não SubAtividade 957 A YES
Atividade BTREE Não Não Atividade 79 A YES -
Opa olá Hélio, hoje foi um dia de cão, desculpe a demora, vamos lá, para que possa funcoianr direitinho primeiro crie um arquivo chamado “ajaxSubAtividade.php” (pode ser pelo dreamwaver se quiser), e dentro deste arquivo você deverá fazer uma consulta no banco de dados de SubAtividades pesquisando o id da Atividade nesta tabela e este id será recebido via post, veja:
/* — Coloque aqui sua conexão com o banco de dados — */
$atividade = $_POST["idAtividade"];
$sql = “SELECT * FROM SubAtividade WHERE Atividade = $atividade”
$totalBusca = mysql_query($sql);while( $linha = mysql_fetch_assoc($totalBusca) ){
echo “”.htmlentities($linha["SubAtividade"]).”\n”;
}Não se esqueça de fazer conexão no seu banco de dados e confira se os nomes dos campos estão certos ok? Agora voltamos para a página onde você monta o formulário e também muito importante coloque este arquivo em um local fácil de achar por exemplo crie uma pasta na raiz do servidor chamada “ajax” e coloque aqui este arquivo, aqui na linha onde você existe a atividade de ao select um id, veja abaixo:
Agora no select de SubAtividades não faça nenhuma chamada apenas de um id a ele como mostra abaixo:
Escolha primeiro uma Atividade
Agora neste mesmo arquivo no início dele chame o jQuery no início do arquivo e coloque a instrução abaixo como no post:
function getSubAtividade(valor){
$(“#subAtividade”).html(“Carregando…”);
setTimeout(function(){
$(“#subAtividade”).load(“/ajax/ajaxSubAtividade.php”,{id:valor})
}, 2000)
};Pronto acredito que isso resolva, vou postar em breve outra função bem melhor e mais segura do jquery para passar parâmetros entre páginas.
Velinho mais uma dica, de uma verificada no português viu, isso pega mal na hora do seu cliente ver o site.
Até mais
-
Olá Adriano, creio que esta função esteja corretíssima, mas acho que eu estou no mundo da lua meu irmão, não estou conseguindo resultado,não sei onde estou errando.Você poderia me mandar o fonte completo de como ficaria?
Adriano, a respeito do erro de português,não parei para pensar nisso, realmente você está certo. Além da palavra “Fantazia”, que seria “Fantasia”, você observou mais outros erros no site?
Olha, me desculpe está te pedindo muito, é que tenho muita coisa para fazer neste site e estou parado nesta função.
Valeu a força que você está me dando, te agradeço demais.
Até mais.
-
Leonardo Lopes disse:
Olá Adriano. Peguei seu script. estou tentando substituir o select por textfiled. Tipo eu quero o cara digita o valor em uma text ele faz a consulta no banco e retorna o valor na outra text. como proceder pra fazer a substituição? obrigado. sou novo com ajax.
-
Olá leonardo
Seja bem vindo ao mundo bacana do ajax rss, bom vamos lá, para que funcione bacana vamos refinar um pouco mais o código, vou usar aqui uma função de “post” do jQuey (existe uma específica de Ajax muito bacana também), vou transformar esta sua duvida em um novo post para envio de dados sem dar refresh numa página, mas resolvendo seu problema.
Para começar mude a função do jquery para:
function getValor(valor){
$("#recebeValor").val("Carregando...");
$.post("ajaxValor.php", { id:valor },
function(data){
$("#recebeValor").val(data)
});
};Agora no lugar dos selects coloque os campos de texto o que o cara digita acrescente isto:
onkeyup="getValor(this.value)"E no que vai receber o valor coloque o id “recebeValor”.
Nesta nova função eu falo o seguinte, ao escrever qualquer coisa no campo (onKeyup) me retorna a função “getValor” com o que acabei de digitar, já dentro da função eu envio ao arquivo “ajaxValor.php” o post do ID com o valor que digitei e depois no retorno vai até o ID “recebeValor” e preenche seu “value” com a resposta, para testar usei este PHP:
$id = $_POST["id"];
if($id == ""){
echo "digite algo";
}else if($id == "a"){
echo "Adriano";
}else if($id == "ab"){
echo "Abacate";
}else if($id == "abc"){
echo "ABC Paulista";
}else {
echo "Nada encontrado";
}Daí é so trocar os “if´s” pela busca no banco dados usando o “LIKE %$id%” ai pronto.
Vou fazer um novo post neste fim de semana com mais detalhes e exemplos da função “get” e “post” do jQeury e depois o mais bonzão de todos a função “Ajax”, até!
-
Adriano, consegui desenrolar fazendo várias tentativas e estudando mais um pouco a respeito.
Valeu pela sua boa intenção.
-
ramon césar disse:
muito bom ao post. parabens
Olá seja bem vindo ao meu blog, sou webdesigner há uns quatro anos, atualmente faço parte da família Brasil na Web. Minha proposta aqui é trazer soluções rápidas e práticas. Aproveitem! 
boa adriano!!! fico rox esse codigo!