+12
Manipulando ComboBox com XMLHttpRequest
Agora vejamos os outros 2 scripts:
- index.php (script com o select categorias, fixo, sem atualizações)
Esse script apenas monta o combobox categorias buscando os dados da tabela categorias do banco de dados. Antes de ver o último script, note que a função Atualiza() é chamada ao ser carregada a página:
E no evento OnChange do combo categorias, passando o valor selecionado por parâmetro:
A função Atualiza() do script script.js irá "jogar" esse valor na URL, portanto, o script PHP poderá fazer uso desse valor recuperando-a por GET, mas sem REFRESH.
Perceba tambem o elemento <div>:
A parte realmente dinâmica, da atualização do segundo combo, presente no script atualiza.php será incluído nesse layer
- atualiza.php (script com a parte dinâmica da atualização do combo subcategorias)
Esse script apenas tem o código php que cria o preenche o segundo combo com os dados buscados no bd, de acordo com a variável recebida por GET que corresponde ao valor selecionado no primeiro combo.
Agora é só testar!
Bem, esse é meu primeiro artigo. Se houver interesse eu faço outro artigo explicando o funcionamento de um script de usuários on-line com XMLHttpRequest. ;)
- index.php (script com o select categorias, fixo, sem atualizações)
<HTML>
<HEAD>
<script language="javascript" type="text/javascript" src="script.js"></script>
</HEAD>
<BODY OnLoad="javascript:Atualiza();">
<form>
<select name="categoria" onChange="javascript:Atualiza(this.value);">
<option>---Escolha uma opção---</option>";
<?php
$conexao = mysql_connect('xmlhttprequest','','');
if (!$conexao) {
die("Configuracao de Banco de Dados Errada!");
}
// monta dados do combo 1
$sql = "SELECT DISTINCT nome_categoria,id_categoria FROM categoria";
$resultado = mysql_query($sql, $conexao) or die("Problema na Consulta");
while ($linha = mysql_fetch_array($resultado)) {
echo "<option value=\"" . $linha['id_categoria'] . "\">" . $linha['nome_categoria'] . "</option>";
}
?>
</select>
</form>
<div id="atualiza"></div>
</BODY>
</HTML>
Esse script apenas monta o combobox categorias buscando os dados da tabela categorias do banco de dados. Antes de ver o último script, note que a função Atualiza() é chamada ao ser carregada a página:
<BODY OnLoad="javascript:Atualiza();">
E no evento OnChange do combo categorias, passando o valor selecionado por parâmetro:
<select name="categoria" onChange="javascript:Atualiza(this.value);">
A função Atualiza() do script script.js irá "jogar" esse valor na URL, portanto, o script PHP poderá fazer uso desse valor recuperando-a por GET, mas sem REFRESH.
Perceba tambem o elemento <div>:
<div id="atualiza"></div>
A parte realmente dinâmica, da atualização do segundo combo, presente no script atualiza.php será incluído nesse layer
- atualiza.php (script com a parte dinâmica da atualização do combo subcategorias)
<?php
echo "<select name=\"subcategoria\">";
echo "<option>---Escolha uma opção---</option>";
$conexao = mysql_connect('xmlhttprequest','','');
if (!$conexao) {
die("Configuracao de Banco de Dados Errada!");
}
// busca dados do combo 2
$sql = "SELECT
DISTINCT subcategoria.nome_subcategoria
FROM
subcategoria
INNER JOIN
categoria
ON
categoria.id_categoria = subcategoria.id_categoria
WHERE
subcategoria.id_categoria = '".$_GET['categoria']."'";
$resultado = mysql_query($sql) or die ("Problema na Consulta");
while ($linha = mysql_fetch_array($resultado)) {
echo "<option>".$linha['nome_subcategoria']."</option>";
}
echo "</select>";
?>
Esse script apenas tem o código php que cria o preenche o segundo combo com os dados buscados no bd, de acordo com a variável recebida por GET que corresponde ao valor selecionado no primeiro combo.
Agora é só testar!
Bem, esse é meu primeiro artigo. Se houver interesse eu faço outro artigo explicando o funcionamento de um script de usuários on-line com XMLHttpRequest. ;)
Esclarecendo, já consegui colocar para funcionar aqui no meu caso os códigos.
Valeu pela força.
Abraços a todos.
Líbene Fernandes
Valeu pela força.
Abraços a todos.
Líbene Fernandes
20/04/2006 8:01am
(~18 anos atrás)
Antes de mais nada quero parabenizá-la Vanessa, ótimo código, ficou bem claro, e é uma idéia bem legal. Parabéns.
E uma pergunta, vocês testaram o código mysql com 3 combos, ele tá ok?
Pois não consegui muita coisa, estou refazendo aqui o código, mas de repente se alguém tiver conseguido numa boa, já é um tempo que não será perdido.
Abraços a todos.
Líbene Fernandes
E uma pergunta, vocês testaram o código mysql com 3 combos, ele tá ok?
Pois não consegui muita coisa, estou refazendo aqui o código, mas de repente se alguém tiver conseguido numa boa, já é um tempo que não será perdido.
Abraços a todos.
Líbene Fernandes
05/04/2006 5:18am
(~18 anos atrás)
Quando eu testo a pagina isoladamente, os combos aparecem e tudo funciona norma...
mas quando eu jogo dentro do centro da minha página, logo na entrada o combo cidades nem entra..pq sera?
mas quando eu jogo dentro do centro da minha página, logo na entrada o combo cidades nem entra..pq sera?
20/01/2006 5:39am
(~19 anos atrás)
O ruim de usar utf8_encode, é que as paginas ficam despadronizadas...
se eu tiver todas as páginas prontas, vou ter que colocar utf8_encode em toda página.
A mesma coisa acontece se eu usar o Ajax ou Cajax?
Faloww
se eu tiver todas as páginas prontas, vou ter que colocar utf8_encode em toda página.
A mesma coisa acontece se eu usar o Ajax ou Cajax?
Faloww
17/01/2006 4:40am
(~19 anos atrás)
Exceto pela linha req.send(null);
há uma diferença entre passar null e (), certo ?
há uma diferença entre passar null e (), certo ?
13/01/2006 5:32am
(~19 anos atrás)
talvez o algoritmo possa ser melhorado dentro da função loadXMLDoc():
as três linhas:
req.onreadystatechange = processReqChange;
req.open("GET", url+'?categoria='+valor, true);
req.send(null);
podem ser retiradas do if else e colocadas logo abaixo.
bom artigo.
espero ter ajudado
as três linhas:
req.onreadystatechange = processReqChange;
req.open("GET", url+'?categoria='+valor, true);
req.send(null);
podem ser retiradas do if else e colocadas logo abaixo.
bom artigo.
espero ter ajudado
13/01/2006 5:24am
(~19 anos atrás)
Parabens para Limeira pelo o que produziu .. ah sei la nao sei falar portugues.
11/11/2005 7:30pm
(~19 anos atrás)
Achei bastante interessante o seu artigo.
Continue assim, sempre publicando novos artigos.
Continue assim, sempre publicando novos artigos.
11/11/2005 11:57am
(~19 anos atrás)
pode me auxiliar? da erro no intenet explorer, ate tentei corrigfi os erros, mas nao tive sucesso :(
agradecido abraços