Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

combobox - atualizar valores do combo select com ajax+jQuery

16-11-2008 02:44

Bom, estou conhecendo a biblioteca jQuery, que tem muitas muitas muitas funções que podemos executar com ela.
Aqui no forum tem outras formas de fazer o combobox, como este http://www.codigosnaweb.com/forum/viewt ... =56&t=2583
Porém utilizando a biblioteca jQuery tem uma maneira muito simples.

/////////////***************** PARTE JAVASCRIPT***********************//////////
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/* função para popular o combobox */
$().ready(function() {
$("select[@name=nomeCampo]").change(function(){
$('select[@name=campoResposta]').html('<option value="">... Procurando ...</option>');
$.post('pagina_com_conteudo.php',{ valor: $(this).val() },
function(resposta){
$('select[@name=campoResposta]').html(resposta);
}

);
});
</script>

//////////////////////***************************PARTE HTML******************************/////////////
<select name="nomeCampo" id="nomeCampo">
<option id="opcoes" value="1">-- 1 --</option>
<option id="opcoes" value="2">-- 2 --</option>
<option id="opcoes" value="3">-- 3 --</option>
<option id="opcoes" value="4">-- 4 --</option>
</select>
<br>

<select name="campoResposta" id=campoResposta">
<option id="opcoes" value="0">-- selecione opção acima--</option>
</select>

a pagina_com_conteudo.php deve ser +/- assim:
lembrando de que ja precisa estar feita a conexão com o banco de dados, para que a consulta seja possível.

////////**********PAGINA PHP QUE FAZ CONSULTA NO BANCO DE DADOS********////////
if (isset($_POST['valor'])){
$res=mysql_query('SELECT * FROM tabela WHERE campo_identificador = \''.$_POST['valor'].'\' ');
while($ok=mysql_fetch_array($res)){
echo " <option value='".$ok['campo_id']."'>".$ok['campo_nome']."</option>\n ";
}
}else{
echo 'Erro no envio dos dados';
}

As partes que merecem atenção para não gerar erro, estão coloridas, são os nomes dos campos e dos dados da consulta ao banco de dados.

o jquery.js vc deve baixar deste site: http://jquery.com/
procure baixar a versão otimizada, menor tamanho e sempre a mais nova.
0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17739
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

combobox - atualizar valores do combo select com ajax+jQuery

16-11-2008 09:59

Não tá faltando algo? Seguindo a orientação não consegui passar os dados, não deu o onchange no select.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

combobox - atualizar valores do combo select com ajax+jQuery

16-11-2008 11:05

Você não deve ter inserido o caminho pro jquery.js corretamente.
Lembrando que a parte javascript sempre deve estar dentro dos HEAD, primeiro o jquery.js depois os comandos.

esta é a parte que faz o onchange no select

$().ready(function() { ///// le o documento todo $("select[@name=nomeCampo]").change(function(){ //acha o elemento select com o nome "nomeCampo" e aguarda o "change" pra iniciar a "function()"

0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

combobox - atualizar valores do combo select com ajax+jQuery

16-11-2008 11:19

Testei aqui e funcionou certinho, vou postar todos os arquivos pra facilitar

primeira o banco de dados:
http://www.codigosnaweb.com/forum/bairros.sql.zip

combo.php

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); header("Expires: Wed, 21 Dec 1983 09:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s ") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0?", false); header("Pragma: no-cache"); ?> <HEAD>  <TITLE>ComboBox com jQuery</TITLE>    <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $().ready(function() {     $("select[@name=listEstados]").change(function(){         $('select[@name=listCidades]').html('<option value="xxx">... Procurando ...</option>');         $('select[@name=listBairros]').html('<option value="xxx">Selecione a cidade</option>');         $.post('buscacidade.php',{ estado : $(this).val() },         function(resposta){                      $('select[@name=listCidades]').html(resposta);                 }         );     });              $("select[@name=listCidades]").change(function(){         $('select[@name=listBairros]').html('<option value="xxx">Procurando :::::::</option>');         $.post('buscabairro.php',{ cidade : $(this).val() },         function(resposta){                      $('select[@name=listBairros]').html(resposta);                 }         );     });      }); </script> </HEAD> <BODY> <form > <table border="0" width="100%" cellspacing="0" cellpadding="0">     <tr>         <td align="right">Estado:</td>         <td>                <select size="1" id="listEstados" name="listEstados">             <option value="0"> Selecione o estado </option> <?php                 $db = new mysqli('localhost', 'root' ,'', 'pd');                 $query = $db->query("SELECT * FROM local_estado ORDER BY nome_estado ASC");                 if($query) {                     while ($result = $query ->fetch_object()) {                          echo '<option value="'.$result->sigla_estado.'">'.$result->nome_estado.'</option>';                      }     } ?>         </td>     </tr>     <tr>         <td align="right">Cidade:</td>         <td>          <select name="listCidades" id="listCidades">             <option id="opcoes" value="0">-- selecione o estado --</option>          </select>         </td>     </tr>     <tr>         <td align="right">Bairro:</td>         <td>           <select name="listBairros" id="listBairros">             <option id="opcoes" value="0">-- selecione a cidade --</option>          </select>         </td>     </tr> </table>     <input type="submit" value="Começar" > </form> </BODY> </HTML>

buscacidade.php

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); header("Expires: Wed, 21 Dec 1983 09:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s ") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0?", false); header("Pragma: no-cache"); $conn = mysql_connect("localhost","root",""); mysql_select_db("banco",$conn); echo '<option id="opcoes" value="0">-- escolha a cidade --</option>'; if (isset($_POST['estado'])){ $res=mysql_query('SELECT * FROM local_cidade WHERE estado = \''.$_POST['estado'].'\' ORDER BY nome_cidade'); $cont=0; while($ok=mysql_fetch_array($res)){ echo " <option value='".$ok['id_cidade']."'>".$ok['nome_cidade']."</option>\n "; $cont++; } }else{ echo 'Erro no envio dos dados'; } ?>

buscabairro.php

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); header("Expires: Wed, 21 Dec 1983 09:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s ") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0?", false); header("Pragma: no-cache"); $conn = mysql_connect("localhost","root",""); mysql_select_db("banco",$conn); echo '<option id="opcoes" value="0">-- escolha o bairro --</option>'; if (isset($_POST['cidade'])){ $res=mysql_query('SELECT * FROM local_bairro WHERE id_cidade = \''.$_POST['cidade'].'\' ORDER BY nome_bairro'); $cont=0; while($ok=mysql_fetch_array($res)){ echo " <option value='".$ok['id_bairro']."'>".$ok['nome_bairro']."</option>\n "; $cont++; } }else{ echo 'Erro no envio dos dados'; } ?>

0
MIDZ.com.br
http://www.midz.com.br
Soluções Web

Quem está online

Usuários navegando neste fórum: Bing [Bot]