Fez aquele sistema legal e quer disponibilizar para outros usuários Essa é a seção correta para isso.
Moderador: web
 por Brunocasado Offline » Ter Nov 11, 2008 10:24 am
|
|
Opa Galera, como aqui ainda não encontrei um script de select dinamico com ajax, e algumas pessoas tem duvidas, resolvi colocar um script que fiz. Vamos lá:
Primeiro de tudo crie as Bases de dados:
- Código: Selecionar todos
CREATE TABLE `categorias_auto` (
`codigo` int(3) unsigned NOT NULL auto_increment,
`nome` varchar(50) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`codigo`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
INSERT INTO `categorias_auto` (`codigo`,`nome`) VALUES
(1,'Carros'),
(2,'Motos');
/*!40000 ALTER TABLE `categorias_auto` ENABLE KEYS */;
--
-- Definition of table `categorias_carro`
--
DROP TABLE IF EXISTS `categorias_carro`;
CREATE TABLE `categorias_carro` (
`codigo` int(10) unsigned NOT NULL auto_increment,
`marca` varchar(45) character set latin1 collate latin1_general_ci NOT NULL,
PRIMARY KEY (`codigo`)
) ENGINE=MyISAM AUTO_INCREMENT=217 DEFAULT CHARSET=utf8;
--
-- Dumping data for table `categorias_carro`
--
/*!40000 ALTER TABLE `categorias_carro` DISABLE KEYS */;
INSERT INTO `categorias_carro` (`codigo`,`marca`) VALUES
(1,'CHEVROLET'),
(2,'CITROËN'),
(3,'FIAT'),
(4,'FORD'),
(5,'HONDA'),
(6,'MITSUBISHI'),
(7,'PEUGEOT'),
(8,'RENAULT'),
(9,'TOYOTA'),
CREATE TABLE `subcategoria_carro` (
`codigo` int(10) unsigned NOT NULL auto_increment,
`categoria` int(3) unsigned NOT NULL default '0',
`nome` varchar(50) character set latin1 collate latin1_general_ci NOT NULL,
PRIMARY KEY (`codigo`)
) ENGINE=MyISAM AUTO_INCREMENT=982 DEFAULT CHARSET=utf8;
--
-- Dumping data for table `subcategoria_carro`
--
/*!40000 ALTER TABLE `subcategoria_carro` DISABLE KEYS */;
INSERT INTO `subcategoria_carro` (`codigo`,`categoria`,`nome`) VALUES
(1,1,'ZAFIRA'),
(2,1,'RAMONA'),
(3,1,'PRISMA'),
(4,1,'PICKUP'),
(5,1,'OPALA'),
(6,1,'OMEGA'),
(7,1,'MONZA'),
(8,1,'MONTANA'),
(9,1,'MERIVA'),
Pronto! Aqui criamos as tabelas dos 3 selects. A 1 Categorias auto, a 2 Categorias carro(que seria os modelos dos carros) e a 3 subcategoria_carro(que seriam os carros de acordo com o modelo.
A seguir a parte do AJAX:
biblioteca_ajax.js
- Código: Selecionar todos
// JavaScript Document
var ajax;
var dadosUsuario;
function requisicaoHTTP(tipo,url,assinc,trata)
{
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}
else if(window.ActiveXObject){
ajax = new ActiveXObject("Msxml2.XMLHTTP");
if(!ajax){
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (ajax)
iniciaRequisicao(tipo,url,assinc,trata);
else
alert("Seu navegador não possui suporte a essa aplicação");
}
function iniciaRequisicao(tipo,url,bool,trata){
ajax.onreadystatechange=trata;
ajax.open(tipo,url,bool,trata);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; Charset=UTF-8");
//ajax.overrideMimeType("text/XML");
ajax.send(dadosUsuario);
}
function enviaDados(url){
criaQueryString();
requisicaoHTTP("POST",url,true);
}
function criaQueryString(){
dadosUsuario="";
var frm = document.forms[0];
var numElementos = frm.elements.length;
for(var i=0; i < numElementos; i++){
if(i < numElementos-1){
dadosUsuario += frm.elements[i].name+"=" +
encodeURIComponent(frm.elements[i].value)+"&";
}else{
dadosUsuario += frm.elements[i].name+"=" +
encodeURIComponent(frm.elements[i].value);
}
}
}
Esse arquivo poderá usar para diversas aplicações AJAX. A seguir o código da função que trata os dados recebidos pela biblioteca:
funcoes_ajax.js
- Código: Selecionar todos
function trataMarca()
{
subcat = document.forms[0].marca;
subcat.options.length = 0;
subcat.options[0] = new Option("Carregando...","teste");
if (ajax.readyState == 4) {
subcat.options.length = 0;
results = ajax.responseText.split(",");
subcat.options[0] = new Option( "Selecione", "selecione" );
for( i = 0 ; i < results.length; i++)
{
string = results[i].split( "|" );
subcat.options[1+i] = new Option( string[0], string[1] );
}
}
}
function trataModelo()
{
subcat = document.forms[0].modelo;
subcat.options.length = 0;
subcat.options[0] = new Option( "Carregando..", "selecione" );
if (ajax.readyState == 4) {
subcat.options.length = 0;
results = ajax.responseText.split(",");
subcat.options[0] = new Option( "Selecione", "selecione" );
for( i = 0 ; i < results.length; i++)
{
string = results[i].split( "|" );
subcat.options[1+i] = new Option( string[0], string[1] );
}
}
}
Essas 3 funções são responsáveis por tratar os dados da chamada do AJAX. eles montam os selects com seus respectivos valores.
As querys PHP:
query_marcas.php
- Código: Selecionar todos
<?php
include "../conexao/conexao_mysql.inc";
$categoria = addslashes($_GET["id"]); // pegamos o id passado pelo select
if ($categoria == 1){
$consulta = mysql_query("SELECT * FROM categorias_carro GROUP BY marca ASC") or die(mysql_error()); // selecionamos todas as subcategorias que pertencem à categoria selecionada
while( $row = mysql_fetch_array($consulta) )
{
echo utf8_encode($row["marca"]) . "|" . $row["codigo"] . ","; // apresentamos cada subcategoria dessa forma "NOME|CODIGO,NOME|CODIGO,NOME|CODIGO,...", exatamente da maneira que iremos tratar no JavaScript
}
}
?>
Esta query é Responsável pelas marcas.
Ultima query:
query_modelo.php
- Código: Selecionar todos
<?php
include "../conexao/conexao_mysql.inc";
$categoria = addslashes($_GET["cat"]);
$subcategoria = addslashes($_GET["id"]); // pegamos o id passado pelo select
if ($categoria == 1){
$consulta = mysql_query("SELECT * FROM subcategoria_carro WHERE categoria = $subcategoria GROUP BY nome ASC") or die(mysql_error()); // selecionamos todas as subcategorias que pertencem à categoria selecionada
while( $row = mysql_fetch_array($consulta) )
{
echo utf8_encode($row["nome"]) . "|" . $row["categoria"] . ","; // apresentamos cada subcategoria dessa forma "NOME|CODIGO,NOME|CODIGO,NOME|CODIGO,...", exatamente da maneira que iremos tratar no JavaScript
}
}
?>
Responsável pelos modelos.
A seguir os selects com as funções e a query do 1 select.
- Código: Selecionar todos
<table><form name="filtro" action="" method="get">
<tr>
<td width="63">Categorias:</td>
<td width="156"><select name="categoria" id="categorias" onchange="Javacript:requisicaoHTTP('GET','querys/query_marca.php?id=' + this.value + '&',true,trataMarca);">
<?php
include "conexao/conexao_mysql.inc";
$sql = "SELECT * FROM categorias_auto ORDER BY nome ASC";
$run_sql = mysql_query($sql);
echo "<option value=\"\" selected=\"selected\">Selecione</option>";
while($row = mysql_fetch_array($run_sql)){
echo "<option value=\"{$row['codigo']}\">{$row['nome']}</option>\n";
}
?>
</select></td>
</tr>
<tr>
<td>Marca:</td>
<td><select id="marca" name="marca" onchange="Javacript:requisicaoHTTP('GET','querys/query_modelo.php?cat=' + document.filtro.categorias.value + '&id=' + this.value,true,trataModelo);">
</select></td>
</tr>
<tr>
<td>Modelo:</td>
<td><select name="modelo" id="modelo">
</select></td>
</tr>
<tr>
<td>Preço:</td>
<td colspan="3" rowspan="2"><select name="valor">
<option value="5000">R$ 5.000,00</option>
<option value="10000">R$ 10.000,00</option>
<option value="15000">R$ 15.000,00</option>
<option value="20000">R$ 20.000,00</option>
<option value="25000">R$ 25.000,00</option>
<option value="30000">R$ 30.000,00</option>
<option value="35000">R$ 35.000,00</option>
<option value="40000">R$ 40.000,00</option>
<option value="45000">R$ 45.000,00</option>
<option value="50000">R$ 50.000,00</option>
<option value="55000">R$ 55.000,00</option>
<option value="60000">R$ 60.000,00</option>
<option value="65000">R$ 65.000,00</option>
<option value="70000">R$ 70.000,00</option>
<option value="75000">R$ 75.000,00</option>
<option value="80000">R$ 80.000,00</option>
<option value="85000">R$ 85.000,00</option>
<option value="90000">R$ 90.000,00</option>
<option value="95000">R$ 95.000,00</option>
<option value="100000">R$ 100.000,00</option>
</select>
<select name="valor_ate">
<option value="5000">R$ 5.000,00</option>
<option value="10000">R$ 10.000,00</option>
<option value="15000">R$ 15.000,00</option>
<option value="20000">R$ 20.000,00</option>
<option value="25000">R$ 25.000,00</option>
<option value="30000">R$ 30.000,00</option>
<option value="35000">R$ 35.000,00</option>
<option value="40000">R$ 40.000,00</option>
<option value="45000">R$ 45.000,00</option>
<option value="50000">R$ 50.000,00</option>
<option value="55000">R$ 55.000,00</option>
<option value="60000">R$ 60.000,00</option>
<option value="65000">R$ 65.000,00</option>
<option value="70000">R$ 70.000,00</option>
<option value="75000">R$ 75.000,00</option>
<option value="80000">R$ 80.000,00</option>
<option value="85000">R$ 85.000,00</option>
<option value="90000">R$ 90.000,00</option>
<option value="95000">R$ 95.000,00</option>
<option value="100000">R$ 100.000,00</option>
</select></td>
</tr>
<tr>
<td>Até: </td>
</tr>
<tr>
<td>Ano:</td>
<td colspan="3"><select name="ano">
<option selected="selected" value=""></option>
<?php
$ano_atual = date("Y");
$ano_atual += 1;
for($i = 1980; $i <= $ano_atual; $i++) {
echo "<option value=\"$i\">$i</option>\n";
}
?>
</select>Até:
<select name="ano_ate">
<option selected="selected" value=""></option>
<?php
$ano_atual = date("Y");
$ano_atual += 1;
for($i = 1980; $i <= $ano_atual; $i++) {
echo "<option value=\"$i\">$i</option>\n";
}
?>
</select></td>
</tr>
<tr>
<td><input name="Buscar" type="submit" value="Buscar" /></td>
</tr>
</form>
</table>
Analizem os códigos, nos selects na propriedade onchange ele chama a biblioteca AJAX, a função requisicaoHTTP tem 4 parametros. a primeira é o metodo, a segunda a pagina a ser carregada, a terceira se o modo e assincronico ou sincronico, e a quarta e o nome da função que irá tratar os dados recebidos que por sua vez serão resposáveis pelas montagens dos select. Lembrando que poderá usar o requisicaoHTTP para qualquer tipo de chamada AJAX.
Brunocasado
ATIVO
Mensagens: 50
Registrado em: Qua Ago 13, 2008 6:26 pm
Localização: Sampa/Itanhaem/Brasil
|
por web Offline » Ter Nov 11, 2008 12:30 pm
MOVIDO: de MySQL para Laboratório de scripts PHP / MySQL
Testei aqui e funciona blz, mas, vou dar umas dicas de alterações no script para facilitar.
- O novo SQL é esse, que foi indicado pelo postador desse post
sql aqui
- No arquivo principal, onde vai os selects option para escolher os modelos e tal, você não pode esquecer de chamar os js.
<script src="funcoes_ajax.js"></script>
<script src="biblioteca_ajax.js"></script>
- No primeiro select option do arquivo tem esse trecho: TP('GET','query_marca.php?... O indicado é query_marcas.php, aí só adicionar o s
- No arquivo principal também, os arquivos de query estão setados para querys/, como eu joguei tudo no mesmo diretório, tirei as pastas das duas chamadas no arquivo principal, se for fazer o mesmo, faça a mesma alteração.
- É feito um include do arquivo de conexão, se não tiver, use o seguinte:
$conexao = mysql_connect("localhost", "seulogin", "suasenha") or die(mysql_error());
$db = mysql_select_db("seubd");
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb [@] hotmail [.] com
web
ADMIN
Mensagens: 11909
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por nunosergio Offline » Qui Nov 13, 2008 9:53 am
Olá bom dia
Seu post está altamente, estava com dificuldade em fazer um select assim.
Muito obrigado
nunosergio
NOVO MEMBRO
Mensagens: 1
Registrado em: Qui Nov 13, 2008 9:07 am
Localização: Portugal - Ilha da Madeira
|
por marcojesus Offline » Dom Nov 30, 2008 2:51 pm
Olá boas a todos,
venho agradecer o seu Post, pois era isto que andava a procura. No entanto queria fazer uma pergunta:
Será possível apenas com o atributo "onchange" da 1ª tag Select carregar os options de dois selects da mesma form?
Um abraço e obrigado
marcojesus
NOVO MEMBRO
Mensagens: 3
Registrado em: Sex Nov 28, 2008 4:29 pm
Localização: Portugal - Caldas da Rainha
|
por Brunocasado Offline » Seg Dez 01, 2008 1:40 pm
Sim é possivel, você terá que construir mais uma pagina em php que traz os dados e no mesmo onchange do select você terá que colocar mais uma chamada ajax.
e construir mais um tratamento ajax tb, que será responsável pela montagem do select. na verdade o mesmo select vai executar 2 funções.
Brunocasado
ATIVO
Mensagens: 50
Registrado em: Qua Ago 13, 2008 6:26 pm
Localização: Sampa/Itanhaem/Brasil
|
por marcojesus Offline » Seg Dez 01, 2008 1:59 pm
Sim foi o que eu pensei mas experimentei e apenas actualiza um select o outro fica "carregando..."
já agora o código que utilizei segundo o exemplo acima dado foi:
- Código: Selecionar todos
<td width="63">Categorias:</td>
<td width="156"><select name="categoria" id="categorias" onchange="Javacript:requisicaoHTTP('GET','querys/query_marca.php?id=' + this.value + '&',true,trataMarca); requisicaoHTTP('GET','querys/query_marca2.php?id=' + this.value + '&',true,trataMarca2); ">
ou seja, no atributo onchange coloquei as duas chamadas ajax - o que me parece é que a ultima bloquei a primeira terá de haver um temp de espera???
Um abraço
marcojesus
NOVO MEMBRO
Mensagens: 3
Registrado em: Sex Nov 28, 2008 4:29 pm
Localização: Portugal - Caldas da Rainha
|
por Brunocasado Offline » Seg Dez 01, 2008 9:55 pm
hmmmm, nâo tinha pensado nisso.
Realmente não vai dar não. teria que usar um timer ou o que eu aconselho a você é com apenas 1 chamada ajax, chamar o arquivo php que traz os resultados, e no tratamento vc construir de um modo que jogue nos 2 selects.
exemplo ali esta sendo explodido quando encontra |
no arquivo php, você pode jogar os resultados dos selects um em cada linha. a 1 linha você mantém o | a cada resultado. e a segunda linha faça as quebras com ,. ai você terá 2 variaveis. ai e só jogar os resultado em seus respectivos selects.
Brunocasado
ATIVO
Mensagens: 50
Registrado em: Qua Ago 13, 2008 6:26 pm
Localização: Sampa/Itanhaem/Brasil
|
por marcojesus Offline » Sáb Dez 06, 2008 10:42 pm
Obrigado pela dica.... valeu.
Um abraço
marcojesus
NOVO MEMBRO
Mensagens: 3
Registrado em: Sex Nov 28, 2008 4:29 pm
Localização: Portugal - Caldas da Rainha
|
por digitalrio Offline » Qua Mar 17, 2010 4:52 pm
 preciso munto de um select com as mesmas caracteristicas aqui apresentada, mas esse não funfa!!! não consigo faze-lo funcionar... alguém pode me ajudar e passar o script ou um outro???
email/MSN: contatos@casadossites.com.br
Até pago!!!!
digitalrio
NOVO MEMBRO
Mensagens: 2
Registrado em: Qua Mar 17, 2010 1:30 pm
|
por walck Offline » Dom Mar 21, 2010 12:58 am
Cara seu script esta muito bom só que não consegui fazer funcionar caso o visitante do site escolha moto será que alguem poderia me ajudar???
Desde já muito obrigado!
walck
NOVO MEMBRO
Mensagens: 2
Registrado em: Sáb Mar 20, 2010 4:49 pm
|
por Brunocasado Offline » Dom Mar 21, 2010 2:35 am
Mas da para saber qual o erro que está dando? ou não tem erro?
Brunocasado
ATIVO
Mensagens: 50
Registrado em: Qua Ago 13, 2008 6:26 pm
Localização: Sampa/Itanhaem/Brasil
|
por walck Offline » Dom Mar 21, 2010 12:56 pm
Então pelo que entendi , no script não esta previsto a escolha da moto, posso estar errado , mas assim se vc ecolher carro é codigo 1 moto é codigo 2 quando escolhe carros ele abre normalmente as marcas e quando escolhe marcas ele mostra os modelos referente a aquela marca até ai perfeito 100% funcional, o problema é quando escolhe moto não achei aonde associa as marcas para as motos e depois os modelos para as marcas de motos... alguem pode me ajudar?
walck
NOVO MEMBRO
Mensagens: 2
Registrado em: Sáb Mar 20, 2010 4:49 pm
|
por Brunocasado Offline » Dom Mar 21, 2010 2:32 pm
Crie uma bd para as motos.
ai no arquivo query marcas acrescentar:
- Código: Selecionar todos
<?php
include "../conexao/conexao_mysql.inc";
$categoria = addslashes($_GET["id"]); // pegamos o id passado pelo select
if ($categoria == 1){
$consulta = mysql_query("SELECT * FROM categorias_carro GROUP BY marca ASC") or die(mysql_error()); // selecionamos todas as subcategorias que pertencem à categoria selecionada
while( $row = mysql_fetch_array($consulta) )
echo utf8_encode($row["marca"]) . "|" . $row["codigo"] . ","; // apresentamos cada subcategoria dessa forma "NOME|CODIGO,NOME|CODIGO,NOME|CODIGO,...", exatamente da maneira que iremos tratar no JavaScript
}elseif($categoria ==2){
(Instrucoes do banco das motos)
(Repita o while da condição acima porém para as motos com separação por | )
}
}
?>
Pronto o sistema se encarregara de realizar o resto. Este sistema desenvolvi para um cliente que queria so carros, então seria bom utilizar nomes genéricos.
Brunocasado
ATIVO
Mensagens: 50
Registrado em: Qua Ago 13, 2008 6:26 pm
Localização: Sampa/Itanhaem/Brasil
|
Voltar para Laboratório de scripts PHP / MySQL
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 2 visitantes
|
|
|
