+12

Manipulando ComboBox com XMLHttpRequest

criado por Vanessa Schissato em 17/09/2005 8:32pm
Agora vejamos os outros 2 scripts:

- 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. ;)

Comentários:

Mostrando 1 - 10 de 68 comentários
Mas nao cosnegui fazer funcionar :(
pode me auxiliar? da erro no intenet explorer, ate tentei corrigfi os erros, mas nao tive sucesso :(
agradecido abraços
04/09/2006 5:59am (~17 anos atrás)

Esclarecendo, já consegui colocar para funcionar aqui no meu caso os códigos.
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
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?
20/01/2006 5:39am (~18 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
17/01/2006 4:40am (~18 anos atrás)

Exceto pela linha req.send(null);

há uma diferença entre passar null e (), certo ?
13/01/2006 5:32am (~18 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
13/01/2006 5:24am (~18 anos atrás)

Parabens para Limeira pelo o que produziu .. ah sei la nao sei falar portugues.
11/11/2005 7:30pm (~18 anos atrás)

Achei bastante interessante o seu artigo.
Continue assim, sempre publicando novos artigos.
11/11/2005 11:57am (~18 anos atrás)

pelo visto vc ja tinha achado o erro
=p
o q era??
=p
05/11/2005 6:04pm (~18 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)