+12
Manipulando ComboBox com XMLHttpRequest
Por ser uma linguagem server-side, algumas coisas eram praticamente impossíveis ou muito complexas para serem feitas apenas em PHP. Por outro lado, linguagens client-side, como JavaScript são muito mais dinâmicas, mas apresentam limitação ao browser/cliente.
Programando da forma convencional, geralmente há a necessidade de atualizações (refreshs) do browser para que a parte PHP e JavaScript possam interagir. O problema aqui é que não fica uma coisa transparente ao usuário e aumenta o trabalho na programação. Utilizando-se PHP+Javascript com a tecnologia XMLHttpRequest podemos fazer essa interação de uma forma muito mais simples, sem refresh.
Selecionei aqui um caso em que há dificuldade por parte dos programadores,
programando na forma convencional, devido a necessidade de interagir banco de dados (server-side) e a interatividade de uma linguagem cliente-side.
ATUALIZAR COMBOBOX (combobox que ao ser selecionado carrega um outro combobox com subcategorias, buscando os valores no banco de dados de acordo com o primeiro valor selecionado)
Vamos desenvolver esse exemplo em XMLHttpRequest!
Obs: os scripts podem ser copiados diretamente do artigo, ou acesse o link, onde há a versão para postgres e para mysql: http://www.phpbrasil.com/scripts/script.php/id/2454
Primeiro, o script javascript (script.js):
Esse artigo não tem por base explicar detalhadamente o funcionamento desse script.
Para entender um pouco mais do script: http://www.phpbrasil.com/articles/article.php/pagerRow/0/id/992
Programando da forma convencional, geralmente há a necessidade de atualizações (refreshs) do browser para que a parte PHP e JavaScript possam interagir. O problema aqui é que não fica uma coisa transparente ao usuário e aumenta o trabalho na programação. Utilizando-se PHP+Javascript com a tecnologia XMLHttpRequest podemos fazer essa interação de uma forma muito mais simples, sem refresh.
Selecionei aqui um caso em que há dificuldade por parte dos programadores,
programando na forma convencional, devido a necessidade de interagir banco de dados (server-side) e a interatividade de uma linguagem cliente-side.
ATUALIZAR COMBOBOX (combobox que ao ser selecionado carrega um outro combobox com subcategorias, buscando os valores no banco de dados de acordo com o primeiro valor selecionado)
Vamos desenvolver esse exemplo em XMLHttpRequest!
Obs: os scripts podem ser copiados diretamente do artigo, ou acesse o link, onde há a versão para postgres e para mysql: http://www.phpbrasil.com/scripts/script.php/id/2454
Primeiro, o script javascript (script.js):
var req;
function loadXMLDoc(url,valor)
{
req = null;
// Procura por um objeto nativo (Mozilla/Safari)
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url+'?categoria='+valor, true);
req.send(null);
// Procura por uma versao ActiveX (IE)
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url+'?categoria='+valor, true);
req.send();
}
}
}
function processReqChange()
{
// apenas quando o estado for "completado"
if (req.readyState == 4) {
// apenas se o servidor retornar "OK"
if (req.status == 200) {
// procura pela div id="atualiza" e insere o conteudo
// retornado nela, como texto HTML
document.getElementById('atualiza').innerHTML = req.responseText;
} else {
alert("Houve um problema ao obter os dados:\n" + req.statusText);
}
}
}
function Atualiza(valor)
{
loadXMLDoc("atualiza.php",valor);
}
Esse artigo não tem por base explicar detalhadamente o funcionamento desse script.
Para entender um pouco mais do script: http://www.phpbrasil.com/articles/article.php/pagerRow/0/id/992
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