Olá pessoal depois de ver que muita gente se interessou pelo carregamento de dados em um select usando o método “load” do jQuery (veja aqui o post sobre) que tal usar uma função mais refinadas e mais segura, vamos usar o método POST e GET, mas qual a diferença?
No caso do “LOAD” ele apenas lê uma página e retorna o que ela imprimiu, não há muita segurança nisso,então temos um”nível 2″ em carregamento de jQuery, com mais segurança e tão simples de usar como se estivesse passando dados para uma página normal em PHP por exemplo.
Ok qual a vantagem de se usar o método “POST” e “GET”? Uma das grandes vantagens é que o tempo de resposta é real, note que no artigo anterior usamos um “setTimeout” para dar um “delay” na respota, já nestas funções eles tem um retorno de acordo com o tempo de busca, na íntegra a função “POST” e “GET” tem:
$.post( url, [ dados ], [ sucesso(data, textStatus, XMLHttpRequest) ], [ dataType ] )
$.get( url, [ dados ], [ sucesso(data, textStatus, XMLHttpRequest) ], [ dataType ] )
Isso quer dizer então que ao chamar a função (“POST” ou “GET”) passo uma URL que vai receber os dados, seria no caso o parâmetro que se passa via GET ou POST, com exemplo “index.php?id=1” logo o dado seria “id: 1” e por fim o resultado ao passar os dados.
Então na prática vamos começar com o carregamento de selects (combobox)
Chame o jQuery na sua página:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Agora vamos criar a função que vai pesquisar os dados na página, veja:
function pegaValor(valor){ $('#encontrado').html("Pesquisando..."); $.post("pegaValor.php", { id: valor }, function(data){ $('#recebendo').html(data); }); }
Agora vamos aos selects, o primeiro que vai passar os dados e o segundo que vai receber os dados da função:
Selecione: <select id="selecione" name="selecione" onChange="pegaValor(this.value)"> <option>Selecione algo</option> <option value="1">Dado Um</option> <option value="2">Dado Dois</option> <option value="3">Dado Três</option> </select> Depois o que vai receber os dados <select id="recebendo"> <option value="">Escolha algo antes</option> </select>
$id = $_POST["id"]; if( $id == "Selecione algo"){ /* Se o valor tiver vazio retona vazio */ echo "<option>Selecione algo</option>"; }else{ /* Se tiver o valor então faz checagem no banco ou outra como abaixo */ switch($id){ case 1; echo "<option>Você selecionou o um</option>"; break; case 2; echo "<option>Você selecionou o dois</option>"; break; case 3; echo "<option>Você selecionou o três</option>"; break; } }
Prontinho, agora vamos brincar um pouco mais vamos fazer uma função para que o cara digite algo e retorne com uma busca pela letra que digitou ou palavra, para começar a função abaixo para pesquisar:
function pesquisaValor(valor){ $('#encontrado').hide(); $.post("pesquisaValor.php", { id: valor }, function(data){ if(data == ""){ $('#encontrado').hide(); } else { $('#encontrado').show(); $('#encontrado').html(data); } }); }
E agora o HTML onde o cara digita a palavra e a DIV onde vai receber o resultado:
<small>Dica: Procure pelas letras A, B, C e teste</small><br /> Digete um termo: <input type="text" id="pesquisar" class="pesquisar" onKeyUp="pesquisaValor(this.value)" /> <div id="encontrado" style="display:none"></div>
$id = $_POST["id"]; if( $id == "Selecione algo"){ /* Se o valor tiver vazio retona vazio */ echo "Nada encontrado"; }else{ /* Se tiver o valor então faz checagem no banco ou outra como abaixo */ switch($id){ case "a"; echo "Abacate<br />"; break; case "b"; echo "Banana<br/>Biribiri<br /.;"; break; case "c"; echo "Caqui<br />Caju<br />carambola<br />"; break; case "teste"; echo "opa viu como funciona até chegar na última letra 'e' ele não apresentou o resultado."; break; } }
Agora você pode utilizar esses modelos e dicas para criar coisas mais sofisticadas como formulários sem refresh, carregamento de conteúdo vindo do banco também sem refresh , buscar dados em uma página externa, retornar se uma condição é verdadeira ou falsa, caso desejem postem ai algumas dessas funções que queiram que eu detalhe e de exemplos, fiquem a vontade.
Tweet |
Tenho um campo combo/listbox para “cidades” e um campo combo listbox para “bairros” e um campo combo listbox para “postos de atendimento”
esse campo postos de atendimento vai receber um filtro que vai ter como parametros passados a cidade, tipow assim ao clicar na cidade
o campo postos de atendimento já vai filtrar os postos para aquela cidade, na verdade eu queria passar essa variavel $cidade
para duas páginas “bairros.php” e “postos.php” aqui vai partes do meu codigo:
Minha tabela está mais ou menos assim
tabela cidade:
CODIGO
DESCRICAO
tabela franquias – postos:
CODIGO
CIDADE
RZSOCIAL
NOME_FANTASIA
—————————index.php
//aqui o javascript/jquery para listar os bairros no combo
//Função para o bairro
$(function(){
$(“select[name=list_cidades]”).change(function(){
beforeSend:$(“select[name=list_bairros]”).html(‘Aguarde…’);
var cidade = $(“select[name=list_cidades]”).val();
$.post(“bairros.php”, {cidade: cidade},function(pega_bairro){ //aqui era onde eu queria que fosse passado para a página postos.php também
complete:$(“select[name=list_bairros]”).html(pega_bairro);
})
})
})
//aqui o campo no formulário listando todas as cidades
<?php
$pega_cidades = mysql_query("SELECT * FROM CIDADES ORDER BY DESCRICAO ASC");
if (mysql_num_rows($pega_cidades)<= '0'){
echo 'Não existe nenhum registro’;
}else{
while ($resultado_cidades = mysql_fetch_array($pega_cidades)){
$cidade_codigo = $resultado_cidades[‘CODIGO’];
$cidade_descricao = $resultado_cidades[‘DESCRICAO’];
echo ”.$cidade_descricao.”;
}
}
?>
//aqui o campo que vai receber os bairros
###############################################################
—————bairros.php
//aqui o arquivo que vai pegar os bairros no banco de dados
<?php
$cidade = $_POST['cidade'];
$seleciona_bairro = mysql_query("SELECT * FROM franquia where CIDADE = {$cidade} GROUP BY BAIRRO ORDER BY BAIRRO ASC");
if (mysql_num_rows($seleciona_bairro) <= '0'){
echo 'Nao existe bairros para a cidade informada’;
}else{
//echo ‘Selecione…’;
while ($res_bairro = mysql_fetch_array($seleciona_bairro)){
$bairro_id = $res_bairro[‘CODIGO’];
$bairro_descricao = $res_bairro[‘BAIRRO’];
echo ”.$bairro_descricao.”;
}
}
?>
—————–postos.php
//aqui o arquivo que vai pegar os postos no banco de dados mediante a variavel passada como parametro lá do index
<?php
$cidade = $_POST['cidade']; //aqui o campo que eu queria que vinhesse lá do index.php
$seleciona_posto = mysql_query("SELECT * FROM franquia where CIDADE = {$cidade} ORDER BY CODIGO");
if (mysql_num_rows($seleciona_posto) <= '0'){
echo 'Nao existe bairros para o parametro informado’;
}else{
while ($res_posto = mysql_fetch_array($seleciona_posto)){
$posto_id = $res_posto[‘CODIGO’];
$posto_descricao = $res_posto[‘NOME’];
echo ”.$posto_descricao.”;
}
}
?>
to tentando assim:
$(function(){
$(“select[name=list_cidades]”).change(function(){
beforeSend:$(“select[name=list_bairros]”).html(‘Aguarde…’);
var cidade = $(“select[name=list_cidades]”).val();
$.post(“bairros.php”, {cidade: cidade},function(pega_bairro){
complete:$(“select[name=list_bairros]”).html(pega_bairro);
if(pega_bairro){
$.post(“postos.php”, {cidade: cidade},function(pega_bairro){})
}
})
})
})
Tenho que mandar o value de varios combos(listmenus) sem refresh com jquery para um arquivo que vai montar uma query e listar em outro combo (textbox) sem refresh (sem clicar no submit)
Acho que isso tem que ser feito na mesma função javascript e ele pega o value no change dos respectivos combos e manda para o arquivo no final da funçaõ, não c preocupem com o arquivo que vai receber esses dados por que eu já o preparei so quero a sintaxe de como passar esses valores na mesma função no change de cada combo.
sugestões por favor
Cara consegui hoje resolver depois de muito bater cabeça o codigo ficou mais ou menos assim:
Só queria saber c a sintaxe ta corretinha c poderia melhorar….. mais ele está fazendoo certinho.
$(function(){
$("select[name=list_cidades]").change(function(){
beforeSend:$("select[name=list_bairros]").html('Aguarde...');
beforeSend:$("select[name=list_franquias]").html('Aguarde...');
var cidade = $("select[name=list_cidades]").val();
$.post("bairros.php", {cidade: cidade},function(pega_bairro){
complete:$("select[name=list_bairros]").html(pega_bairro);
if(pega_bairro){
$.post("postos.php", {cidade: cidade},function(pega_franquia){
complete:$("select[name=list_franquias]").html(pega_franquia);
if(pega_franquia){
$("select[name=select_postos]").change(function(){
var cidade = $("select[name=list_cidades]").val();
var sit_postos = $("select[name=select_postos]").val();
$.post("postos.php", {cidade: cidade, sit_postos: sit_postos},function(pega_franquia_sit){
complete:$("select[name=list_franquias]").html(pega_franquia_sit);
})
})
}
})
}
})
})
})
Tenho outra duvida agora completamente diferenete como fazer para habilitar um combo mediante a opção selecionada em outro, desde já agradeço.
ihhhh cara fazendo um teste mais aprimorado no codigo anterior ele está incostante as vezes faz as vezes não faz, mais estamos quase conseguindo c vc puder analizar só para ver c a sintaxe está correta.
Desde já agradeço.
Na hora….
Desde já agradeço, to precisando muito dessa função.
Cara vou fazer o seguinte….
Vou fazer uma video esse final de semana te explicando o meu problema inclusive te mostrando o meu formulário, ok
ai cara como que faiz para que possamos trovar o select da barrinha por um botao posicionado no local x da tela? tipo tenho uma div no canto superior da tela que representaria um carrinho ai no canto direito tenho as imagens de celular, televisao, radio, pc, placa de video etc. ai ao clicar na imagem o cara vai atualizando o seu carrinho com os objetos entendeu mais eu queria que a div nao ficasse mostrando ficasse mostrando so a imagem do carrinho.
tem geito?
Oi cara vc parece ser muito bom nisso sou iniciante sera que vc poderia arruma uma aula para fazer uma barra de pesquisa que pesquise e mostre os resutados em uma div criado variaveis que receba uma div ou com um banco de dados que pesquise uma tabela e mostre o cada item na div como no sate animeambient.net
Ajuda ai
Alo Adriano!
Venho buscando e lendo desde la longe do vovo google, mas como a viagem foi mesmo longa, mas por fim acabei aque eu chegando!
Olhando estou tentando, carregar um conteudo de uma pagina externa, para exibir na minha pagina.
se eu usar o php consigo exatamente fazer isso com apenas duas linhas
—codigo—
so que o meu problema ele nao consegue buscar, o conteudo devido ao bloqueio do servidor externo.
A minha duvida ‘e: Tem como eu pegar este conteudo sem autorizacao do servidor externo?
A materia esta relacionada com cross domain, mas nao estou a conseguir enxergar bem a solucao!
Boa tarde.
Preciso de ajuda, estou a procura de um plugin em jquery para selecionar preço em uma barra de rolagem.
Agradeço desde já,
Otimo POST só uma duvida na função:
function pegaValor(valor){
$(‘#encontrado’).html(“Pesquisando…”);
$.post(“pegaValor.php”, { id: valor },
function(data){
$(‘#recebendo’).html(data);
});
}
tem como eu passar a variavel {id: valor} para duas páginas
$.post(“pegaValor.php”, { id: valor }