Ajax

[Esdras Leite 0]

Pessoal, boa noite. Estou enfrentando um problema simples, mas não consigo resolver de forma alguma. Estou programando com JSP.

Tenho um formulário, dentro desse formulário, tenho três <select>. Eu quero fazer com que a escolha das opções do primeiro, que faz uma consulta ao BD e retorna um valor, povoe as opções dos outros dois selects com dados distintos entre eles. Seria algo semelhante entre Estado e país e um outro select q retorna algumas informações de um país, por exemplo. OK, eu sei que é simples resolver isso com AJAX.

 

O problema é que a atualização só funciona apenas 1 vez, ja passei no onchange do primeiro select as duas funções que alteram os dados dos outros selects, mas elas não funcionam ao mesmo tempo. Se eu comento a função 1 a função 2 funciona, e visse versa. Também já tentei fazer uma função que chama as duas e também não funciona. Lendo a respeito parecia que funções grandes não funcionam. As duas funçoes são idênticas, mudando somente o nome do atributo passado por parâmetro.

 

Alguem sabe como resolver esse problema?

 

Segue o código:

<script language="Javascript" type="text/Javascript">   
     	var xmlHttp
     	var combo

     	function seleciona2(str, target)
     	{
     	xmlHttp=GetXmlHttpObject()
     	if (xmlHttp==null)
     	{
     	alert ("Este browser não suporta HTTP Request")
     	return
     	}


     	var url="seleciona_campo.jsp"
     	url=url+"?campo="+str
     	url=url+"&sid="+Math.random()
     	xmlHttp.onreadystatechange=stateChanged
     	xmlHttp.open("GET",url,true)
     	xmlHttp.send(null)
     	combo = target
     	}

     	function stateChanged()
     	{
     	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     	{
     	document.getElementById(combo).innerHTML=xmlHttp.responseText
     	}
     	}

     	function GetXmlHttpObject()
     	{
     	var objXMLHttp=null
     	if (window.XMLHttpRequest)
     	{
     	objXMLHttp=new XMLHttpRequest()
     	}
     	else if (window.ActiveXObject)
     	{
     	objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
     	}
     	return objXMLHttp
     	}

A função seleciona2 é identica, só muda o parametro.

A função chamada no corpo da página é

function testa(str, target, target2){
     		seleciona2(str, target2);
     		seleciona(str, target);
     	}

 

Na página está assim:

<td><select name="ceape" onchange="testa(this.value,'ceape','campo');"> <OPTION SELECTED> Selecione o Ceape</OPTION>
<% 	rs = Ceape.findAll(db);
       while(rs.next()){
	String nro = rs.getString("nro");
	out.print("<option value=\""+nro+"\">"+nro+"</option>");
        }%>			
        </select></td>
        </tr>                		
        <tr>
          <td>Quarto</td>
   <td><select name="quarto" id="ceape"></select></td>
          </tr>        			
          <tr><td>Campo</td>					
<td><select name="campo" id="campo"></select></td>

 

Alguém sabe o que eu estou fazendo de errado??

Muito Obrigado

 

 

Esdras

[srnetcave 1]

Por que não utilizar jQuery???

 

jQuery

function populateStates() {
   $('#estado').load('states.jsp', function(){
       populateStates($(this).val());
   });
}
function populateStates(stateid) {
   $('#cidade').load('cities.jsp', {stateid: stateid}, function(){
       populateSuburbs($(this).val());
   });
}
function populateSuburbs(cityid) {
   $('#bairro').load('suburbs.jsp', {cityid: cityid});
}
$(function(){
   populateStates();
   $('#estado').change(function(){
       populateCities($(this).val());
   });

   $('#cidade').change(function(){
       populateSuburbs($(this).val());
   });
});

 

pagina com selects

<select id="estado" name="estado"></select>
<select id="cidade" name="cidade"></select>
<select id="bairro" name="bairro"></select>