Carregando dados no Select com jQuery e Ajax
Categoria jQuery, php | 19/11/2009 | Autor - Adriano MeiraOlá 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
Adriano Meira é o criador do blog e trabalha atualmente na Brasil na Web, ha mais de 10 anos vem trabalhando na área de Webdesigner e está cursando a Faculdade INAP no curso de Design Gráfico.
Isso pode ser interresante para você:
| Tweet |
Comente este artigo você também!
Comentários (39)
-
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
-
marcelo disse:
Show de bola Adriano. Me ajudou muito. Parabéns. Continue contribuindo com a galera…
-
legal, cara to apredendo, jQuery, muido doido, legal a dica do acento, manero mesmo,, valew.
-
Aleluiaaaaaaaaaaaaaaaaa
um código que funciona!!!
Consegui fazer ele buscar do BD…com muita ajuda claro heheheParabéns pelo artigo!
-
Márcio Vasconcelos disse:
Amigo, fiz no meu sistema, que uma combo (cidades) carregasse uma outra (UF) com jquery e php.
Estou com um problema que é o seguinte: Ao carregar os dados das cidades, preciso submeter o código da UF e da cidade seleciona, por POST.
Quando submeto, o código da UF vai de boa, mas o da cidade não.
Lembro que o combo de cidades foi o preenchido via jquery.
Você sabe o que pode estar acontecendo?
Muito obrigado e grande abraço. -
Olá Márcio
Bom este é um comportamento estranho, pois com o javasript ele preenche o html como se estive escrito os valores, por gentileza poste ai o código do formulário e soemnte da parte que você pega o POST (no PHP) para eu dar uma olhadinha. Assim posso lhe ajudar mais. -
Davi disse:
Olá Adriano, funcionou tudo certo no meu ajaxValor estou buscando os resultados no banco de dados… porém está retornando apenas o primeiro registro..como faço para ele exibir todos os cadastrados?
Abraços -
Olá Davi
Que bom que meu artigo lhe ajudou, bom para lhe ajudar na resposta do Ajax precisaria dar uma olhadinha no código que está buscando no banco seria melhor se pudesse ver on-line, ai consigo debugar melhor. Mas caso queira vá na minha página de contato mande o código reservado. =) -
Olá Adriano… pois eh, seu artigo foi fundamental. Então, segue o código no arquivo ajaxValor…. repare que no final quando ele vai imprimir o resultado da consulta, ele busca o id e nome da versão do veículo… porém no echo ele só está imprimindo a primeira versão cadastrada… tentei colocar um repeat region mas não deu….. mandei também pela sua página de contato. Abraços
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}$id = $_POST["id"];
mysql_select_db($database_conexRoma, $conexRoma);
$query_rsVersoes = "SELECT * FROM versaonovos WHERE versaonovos.ModNovos_idModNovos = '$id'";
$rsVersoes = mysql_query($query_rsVersoes, $conexRoma) or die(mysql_error());
$row_rsVersoes = mysql_fetch_assoc($rsVersoes);
$totalRows_rsVersoes = mysql_num_rows($rsVersoes);if( $id == 0 ){
echo "Nada escolhido”;
} else {
echo
“$row_rsVersoes[nomeVersaoNovos]“;
}?>
blockquote>
-
Olá Davi
Puxa vida fiquei meio perdido nos eu código,se entendi bem na linha “$row_rsVersoes[nomeVersaoNovos];” falta fazer um While ou um Foreach aqui para montar um loop de valores que você colocou nesta variável, para testar mude a linha acima “$id = $_POST["id"];” para “$id = $_GET["id"];”, daí abra a página onde está este código e no final deposi do .php coloque “id=1″ (coloque um id que tenha vários resultados) e veja se é impresso os arquivos depois volto para POST e pronto.
Se quiser podemos fazer um teste on-line crio um banco e um acesso via FTP para que ponha esta parte da sua aplicação para testarmos junto.
Abráz boa noite =) -
Olá Adriano.. tá funcionando beleza agora. Mas percebi uma coisa… o meu projeto é um site de veículos e tem 2 Forms (1 é o passa valor que contém o modelo do veículo e outro o recebe valor que contém as versões do modelo escolhido)… o form que recebe o valor possui um botão submit…. eu queria que ao clicar no botão ele abrisse uma nova página que trará detalhes desta versão do veículo… aonde coloco a função “nomedapagina.php?recordID=” ???? seria no action do botão? no javascript? na página AjaxValor.php?
Abraços e obrigado pela atenção
-
Olá Davi que bom que esteja funcionando, acredito que para resolver essa questão seja mais simples, se entendi bem no formulário 2 ao clicar no botão de submite você pode passar via GET ou PST no “metod” dos eu formulário o valor “recordID”, para isso basta dentro do formulário colocar um cmapo do tipo input com type hidem algo assim:
Agora na pagina que recebe tratar o post ou o get que você recebeu, agora se estiver passando via ajax de uma lidinha neste artigo que escrevi http://bit.ly/fGG5Lq nele explico como usar a função Ajax do jQuery, assim ao clicar no botão de submite você pode rodar o Ajax e no final coloque instrução “return false” para não submeter o formulário.
-
Parabéns pelo artigo, realmente funcional!
Até consegui adaptar ele, e no segundo select, busca na tabela os nomes dos campos e exibe na tela, enfim, além de aprender um pouco mais de JQuery com Ajax, ainda consegui ir um pouco mais além!
Valeu mesmo! -
Perfeito Adriano, consegui rodar beleza aqui. Parabéns e abraços
-
murilo disse:
boa noite, eu vi seu exemplo de consulta, minha duvida e o seguinte, gostaria de deixar o primeiro combo e o resultado colocar em dois campo texto, sera que e possivel
-
Olá Murilo.
Desculpe a demora, muito trabalho e estudos… Bom em relação a sua dúvida tem como sim, mas para isso seria bom usar a função Ajax do jQuery, de uma olhadinha aqui Ajax Query, aqui explico como fazer a mesma coisa neste pot porém com mais recurso, note que na hora do retorno (“sucess”) você pode colocar aqui os ID´s ou Classes para onde a informação vai.
Dúvidas post ai! =) -
karine disse:
Obrigada, Adriano me ajudou muito… sempre tive problemas com isto!^^ vlw
-
Luiz Felipe disse:
Eu achei legal , mas meio confuso algumas coisas eu não consegui entender direito , da onde vem #ondeVaiCarregar ??? e a ajaxValor.php ??? é aquela debaixo da conexão com banco e a query ou aquela é a pagina_carregada.php ??? num entendi algumas coisas para mim ficaram perdidas ai por isso não ta dando muito certo aqui = /
-
Olá Luiz
Vamos lá por partes, o seletor “#ondeVaiCarregar” seria o segundo select que vai receber a requisição via ajax, por exemplo vamos carregar em um select os estados do Brasil e ao escolher por exemplo minas Gerais no select que tem o ID “#ondeVaiCarregar” receberá o valor da consulta via Ajax.
Essa consulta é feita no arquivo que chamo de “ajaxValor.php”, neste arquivo você pode colocar como quiser sua consulta no banco de dados e receberá os valores passados via Ajax.
No exemplo que coloquei a página “pagina_carregada.php”, eu dei um exemplo de buscar um valor ali dentro dentro de um seletor ID (“#”).
Bom mas para simplificar para você vamos fazer de outra forma, este método é pouco usual confesso e descobri uma forma mais simples de fazer é usando a função $.ajax() do jQuery neste link aqui eu estou explicando melhor.
De uma olhadinha se tiver dúvida pode colocar no post que respondo o mais rápido para você.
-
pedro disse:
bom dia gostaria de saber se voce tem algum tutorial ensinando a fazer este mesmo processo so que ao inves de carregar em outro combo dar um include em uma div ao escolher uma opção no combo.
-
Olá Pedro
Tem como sim, ao invés do seu ID ficar no select basta colocar na DIV, mas aconselho a dar uma olhadinha neste post http://www.adrianomeira.com/blog/usando-a-funcao-ajax-do-jquery onde falo sobre o Ajax que tem mais recursos e segurança.
Até mais
boa adriano!!! fico rox esse codigo!