Criar combo box com ajax e DHTML

7 de março de 2008 7 respostas

vitorbonfim 7 de março de 2008

Bom dia a todos,

Preciso muito da ajuda de vcs!

Estou tentando montar 2 combo boxs, para 1 ser carregada pela outra, ou seja vou selecionar uma informação de uma combo de “UF(Estado)” e carregar numa outra combo as informações das respectivas “Cidades”.
Tentei fazer isso pelo próprio Struts, mas infelizmente não consegui.
Me deram a opção de fazer por ajax, pois é bem mais simples e rápido.
Andei pesquisando, pois não conheço nada do assunto, achei um site que me dá um passo a passo de como usar o ajax com DHTML, mas só que ele usa o PHP, isso me confundiu um pouco, resumindo não estou conseguindo implementar o q quero fazer.

Vcs por algum acaso tem algum exemplo semelhante a esse q expliquei acima?!

Agradeço desde já,

Vitor Bonfim

7 Respostas

maiconramones 7 de mar. de 2008

Bom o que eu já fiz foi o seguinte…

Tu tem uma function que executa o ajax… e dentro dessa function tem uma outra function que trata o retorno do servidor…

Se fala muito em usar xml com ajax…

Mas usando o struts na verdade tu não precisa tratar xml porque o que retorna do teu servidor na real é um texto html já renderizado pelo struts… na real tu teria que pegar esse retorno(um trecho de jsp contendo uma combo box) e colar ela numa div da página jsp que contém a primeira combo que foi selecionada…

Tenta ai, qlqr coisa prende o grito!!

rdgms 7 de mar. de 2008

<html>
<head>
<script language = "javascript">

function vai(obj)
{ 
  var i = obj.selectedIndex;
  var opcao = obj.options[i].value;

// ai você cria uma outra function que retorna um array de dados (de uma xml por exemplo)

//faz um for e popula o outro combo...

document.getElementById('combo2').options[0]=new Option("APRENDA JAVA");
}
	

</script>
</head>

<body>

<form id="form">

 <select name="combo1" size="1" onChange="vai(this)">
  <option value="#">Escolha um
  <option value="guj1">Forum
  <option value="guj2">Tutoriais 
</select>

 <select name="combo2" size="1" >
</select>

</form>
</body>
</html>

é isso ai… um exemplinho bestinha so para vc tirar um base

vitorbonfim 7 de mar. de 2008

rdgms,

Acho q esse exemplo vai resolver meu problema.
Mas não estou conseguindo dar continuidade ao exemplo que me mandou.

Como faço essa function para retornar um array de xml?!

Mais uma vez agradeço,

Vitor

rdgms 7 de mar. de 2008

http://elmicox.blogspot.com/2006/12/trabalhar-com-xml-usando-javascript.html

Amigo achei esse site que explica com se manipula um xml com js…
qualquer coisa… so falar ai

vitorbonfim 7 de mar. de 2008

A dica foi boa, mas infelizmente não estou conseguindo fazer.
Deixa pra lá, vou ver o q consigo fazer ou não fazer.

Mais uma vez obrigado,

Vitor

rdgms 7 de mar. de 2008

To meio sem tempo aqui para criar um js para isso mas na net achei isso:

function conectaXML(arquivo:Number):Array {
       var xml:XML = new XML();
       var matmes:Array = new Array();
       xml.ignoreWhite = true;
       xml.onLoad = function(sucesso) {
             if (sucesso) {
                 for (var i :Number = 0; i < xml.firstChild.childNodes.length; i++ ) {
                  matmes[i] = xml.firstChild.childNodes[i].attributes.numero;
                  trace(matmes[i]); //aqui mostra direitinho os dias... mais ainda nao consigo receber nada desta funcao ....
     }
             } else {
                   trace("Ocorreu um erro ao carregar");
             }
       };
       xml.load(arquivo+".xml");
      return matmes;
}

var teste : Array = conectaXML(1);
trace(teste.length);

vitorbonfim 7 de mar. de 2008

As minhas informações vem de 2 tabelas chamadas de “UF” e “Cidade”.
Para as informações vindas dessas tabelas criei um DAO com uma lista.
Coloquei esssa minha lista numa Action.
A minha pergunta é a seguinte, tenho q criar algum arquivo xml tambem?!

Obrigado,

Vitor

Criado 7 de março de 2008

Ultima resposta 7 de mar. de 2008

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados