Ajax com 3 ComboBox

4 respostas
L

Estou tentando fazer um ajax com 3 combobox…mas n estou conseguindo, o segundo nao esta carregando d acordo c o q eu escolho no primeiro…os meus arquivos onde o tenho o comando
ajax.open(“POST”, “<%=base%>/ajax/secoes.jsp”, true); e ajax.open(“POST”, “<%=base%>/ajax/subsecoes.jsp”, true);
estao funcionando perfeitamente, pois quando digito esses arquivos na url passando os parametros correspondentes, ele carrega o xml com os resultados certinhos…entao creio q onde estou errando deve ser no javascript…

javascript.js

function dados&#40;&#41;
&#123;
		 try &#123;
         ajax = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
      &#125;
      catch&#40;e&#41; &#123;
         try &#123;
            ajax = new ActiveXObject&#40;"Msxml2.XMLHTTP"&#41;;
         &#125;
	     catch&#40;ex&#41; &#123;
            try &#123;
               ajax = new XMLHttpRequest&#40;&#41;;
            &#125;
	        catch&#40;exc&#41; &#123;
               alert&#40;"Esse browser não tem recursos para uso do Ajax"&#41;;
               ajax = null;
            &#125;
         &#125;
      &#125;
	  if&#40;ajax&#41; &#123;
	comboSecoes&#40;ajax&#41;;
	comboSubSecoes&#40;ajax&#41;;
	&#125;
&#125;

function comboSecoes&#40;ajax&#41;
&#123;
     //deixa apenas o elemento 1 no option, os outros são excluídos
	 document.frmAjax.codSec.options.length = 1;
	 idOpcao  = document.getElementById&#40;"opcoes"&#41;;
     ajax.open&#40;"POST", "secoes.jsp", true&#41;;
	 ajax.setRequestHeader&#40;"Content-Type", "application/x-www-form-urlencoded"&#41;;

	 ajax.onreadystatechange = function&#40;&#41; &#123;
     //enquanto estiver processando...emite a msg de carregando
     if&#40;ajax.readyState == 1&#41; &#123;
		idOpcao.innerHTML = "Carregando seções...!";
	 &#125;
	 //após ser processado - chama função processXML que vai varrer os dados
     if&#40;ajax.readyState == 4 &#41; &#123;
		if&#40;ajax.responseXML&#41; &#123;
			processXMLSecao&#40;ajax.responseXML&#41;;
		&#125;
		else &#123;
			//caso não seja um arquivo XML emite a mensagem abaixo
			idOpcao.innerHTML = "Selecione a categoria";
		&#125;
     &#125;
	 //passa o código da categoria escolhida
     var params = "codCat="+document.frmAjax.codCat.value;
     ajax.send&#40;params&#41;;
&#125;
&#125;

function dadosSecoes&#40;&#41;
&#123;
	   var arr = document.frmAjax.codSec.value;
	   comboSubSecoes&#40;&#41;;
&#125;

function comboSubSecoes&#40;ajax&#41;
&#123;
     //deixa apenas o elemento 1 no option, os outros são excluídos
	 document.frmAjax.codSubSec.options.length = 1;

	 idOpcao  = document.getElementById&#40;"opcoes"&#41;;
     ajax.open&#40;"POST", "subsecoes.jsp", true&#41;;
	 ajax.setRequestHeader&#40;"Content-Type", "application/x-www-form-urlencoded"&#41;;

	 ajax.onreadystatechange = function&#40;&#41; &#123;
     //enquanto estiver processando...emite a msg de carregando
     if&#40;ajax.readyState == 1&#41; &#123;
		idOpcao.innerHTML = "Carregando subseções...!";
	 &#125;
	 //após ser processado - chama função processXML que vai varrer os dados
     if&#40;ajax.readyState == 4 &#41; &#123;
		if&#40;ajax.responseXML&#41; &#123;
			processXMLSubSecao&#40;ajax.responseXML&#41;;
		&#125;
		else &#123;
			//caso não seja um arquivo XML emite a mensagem abaixo
			idOpcao.innerHTML = "Selecione a seção";
		&#125;
     &#125;
	 //passa o código da categoria escolhida
     var params = "codCat="+document.frmAjax.codCat.value + "&amp;codSec="+document.frmAjax.codSec.value;
     ajax.send&#40;params&#41;;
&#125;
&#125;

   function processXMLSecao&#40;obj&#41;&#123;
      //pega a tag secao
      var dataArray   = obj.getElementsByTagName&#40;"secao"&#41;;

	  //total de elementos contidos na tag secao
	  if&#40;dataArray.length &gt; 0&#41; &#123;
	     //percorre o arquivo XML paara extrair os dados
         for&#40;var i = 0 ; i &lt; dataArray.length ; i++&#41; &#123;
            var item = dataArray&#91;i&#93;;
			//contéudo dos campos no arquivo XML
			var codigo =  item.getElementsByTagName&#40;"codigo"&#41;&#91;0&#93;.firstChild.nodeValue;
			var descricao = item.getElementsByTagName&#40;"descricao"&#41;&#91;0&#93;.firstChild.nodeValue;

	        idOpcao.innerHTML = ""; //Selecione a seção

			//cria um novo option dinamicamente
			var novo = document.createElement&#40;"option"&#41;;
			    //atribui um ID a esse elemento
			    novo.setAttribute&#40;"id", "opcoes"&#41;;
				//atribui um valor
			    novo.value = codigo;
				//atribui um texto
			    novo.text  = descricao;
				//finalmente adiciona o novo elemento
				document.frmAjax.codSec.options.add&#40;novo&#41;;
		 &#125;
	  &#125;
	  else &#123;
	    //caso o XML volte vazio, printa a mensagem abaixo
		idOpcao.innerHTML = "Selecione a categoria";
	  &#125;
   &#125;

function processXMLSubSecao&#40;obj&#41;&#123;
      //pega a tag secao
      var dataArray   = obj.getElementsByTagName&#40;"subsecao"&#41;;

	  //total de elementos contidos na tag secao
	  if&#40;dataArray.length &gt; 0&#41; &#123;
	     //percorre o arquivo XML paara extrair os dados
         for&#40;var i = 0 ; i &lt; dataArray.length ; i++&#41; &#123;
            var item = dataArray&#91;i&#93;;
			//contéudo dos campos no arquivo XML
			var codigo =  item.getElementsByTagName&#40;"codigo"&#41;&#91;0&#93;.firstChild.nodeValue;
			var descricao = item.getElementsByTagName&#40;"descricao"&#41;&#91;0&#93;.firstChild.nodeValue;

	        idOpcao.innerHTML = ""; //Selecione a seção

			//cria um novo option dinamicamente
			var novo = document.createElement&#40;"option"&#41;;
			    //atribui um ID a esse elemento
			    novo.setAttribute&#40;"id", "opcoes"&#41;;
				//atribui um valor
			    novo.value = codigo;
				//atribui um texto
			    novo.text  = descricao;
				//finalmente adiciona o novo elemento
				document.frmAjax.codSubSec.options.add&#40;novo&#41;;
		 &#125;
	  &#125;
	  else &#123;
	    //caso o XML volte vazio, printa a mensagem abaixo
		idOpcao.innerHTML = "Selecione a seção";
	  &#125;
   &#125;

arquivo.jsp

&lt;form name="frmAjax"&gt;
&lt;select name="codCat" onChange="dados&#40;&#41;;"&gt;
&lt;option value="0"&gt;Selecione a categoria&lt;/option&gt;
&lt;option value="1"&gt;Categoria1&lt;/option&gt;
&lt;option value="2"&gt;Categoria2&lt;/option&gt;
&lt;option value="3"&gt;Categoria3&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;
&lt;select name="codSec" onChange="dadosSecoes&#40;this.value&#41;;"&gt;
   &lt;option id="opcoes" value="0"&gt;Selecione a categoria&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;
&lt;select name="codSubSec"&gt;
   &lt;option id="opcoes" value="0"&gt;Selecione a seção&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;

4 Respostas

C

Isso para o trabalho ou para aprendizado?!

Pesquise sobre o DWR. :wink:

L

Isso é para o meu aprendizado!!!Baixei o dwr para a minha aplicacao e ja fiz o seguinte…

Classe.java

package com.dwr;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;

import com.form.CategoriaForm;
import com.form.SecaoForm;
import com.util.FactoryBO;

public class SecaoAjax &#123;
	
	public Collection getCategorias&#40;&#41;&#123;
		Collection cats = new ArrayList&#40;&#41;;
		Collection categorias = FactoryBO.getCategoriaBO&#40;&#41;.listar&#40;&#41;;
		Iterator it = categorias.iterator&#40;&#41;;
		while&#40;it.hasNext&#40;&#41;&#41;&#123;
			CategoriaForm cf = &#40;CategoriaForm&#41; it.next&#40;&#41;;
			cats.add&#40;cf.getNome&#40;&#41;&#41;;
		&#125;
		return cats;
	&#125;
	
	public Collection getSecoes&#40;int cat&#41;&#123;
		Collection secs = new ArrayList&#40;&#41;;
		Collection secoes = FactoryBO.getSecaoBO&#40;&#41;.listar&#40;cat&#41;;
		Iterator it = secoes.iterator&#40;&#41;;
		while&#40;it.hasNext&#40;&#41;&#41;&#123;
			SecaoForm sf = &#40;SecaoForm&#41; it.next&#40;&#41;;
			secs.add&#40;sf.getNome&#40;&#41;&#41;;
		&#125;
		return secs;
	&#125;
	
&#125;

dwr.xml

&lt;create creator="new" javascript="SecaoAjax"&gt;
   &lt;param name="class" value="com.dwr.SecaoAjax"/&gt;
&lt;/create&gt;
&lt;convert converter="form" match="com.form.CategoriaForm"/&gt;
&lt;convert converter="form" match="com.form.SecaoForm"/&gt;

Arquivo javascript gerado .js

// Provide a default path to dwr.engine
if &#40;dwr == null&#41; var dwr = &#123;&#125;;
if &#40;dwr.engine == null&#41; dwr.engine = &#123;&#125;;
if &#40;DWREngine == null&#41; var DWREngine = dwr.engine;

if &#40;SecaoAjax == null&#41; var SecaoAjax = &#123;&#125;;
SecaoAjax._path = '/teste/dwr';
SecaoAjax.getSecoes = function&#40;p0, callback&#41; &#123;
  dwr.engine._execute&#40;SecaoAjax._path, 'SecaoAjax', 'getSecoes', p0, callback&#41;;
&#125;
SecaoAjax.getCategorias = function&#40;callback&#41; &#123;
  dwr.engine._execute&#40;SecaoAjax._path, 'SecaoAjax', 'getCategorias', callback&#41;;
&#125;

minha jsp

&lt;form name="form1" method="post" action=""&gt;
  &lt;p&gt;
    &lt;select&gt;
	 &lt;option value="1"&gt;Brinquedos&lt;/option&gt;
	 &lt;option value="2"&gt;Cama, Mesa &amp; Banho&lt;/option&gt;
	 &lt;option value="3"&gt;Moda&lt;/option&gt;
    &lt;/select&gt;
&lt;/p&gt;
  &lt;p&gt;
    &lt;select&gt;&lt;/select&gt;
&lt;/p&gt;
&lt;/form&gt;

Agora como faço para popular o meu segundo combobox? qual a funcao do javascript q tenho q chamar? Parei aki e nao sei mais o q fazer…Alguem me ajuda?

C

Excelentes artigos sobre o DWR: http://www.handersonfrota.com.br/?page_id=12

H

O carneiro já te indicou meu site, mas vou te indicar o artido que fiz exatamente isso que vc está querendo.

http://www.handersonfrota.com.br/?page_id=12

6.Combos Aninhadas(Chamadas Aninhadas ao DWR)

Nesse artigo eu explico como fazer isso passo a passo. ;D

Em breve vou colocar a versão em PDF, sempre coloco. Tem tbm as vídeo aulas desses artigo caso seja assinante da Java Magazine ;D o link tbm está no meu site.

Espero ter ajudado.

Criado 15 de julho de 2007
Ultima resposta 18 de jul. de 2007
Respostas 4
Participantes 3