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()
{
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex) {
try {
ajax = new XMLHttpRequest();
}
catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
ajax = null;
}
}
}
if(ajax) {
comboSecoes(ajax);
comboSubSecoes(ajax);
}
}
function comboSecoes(ajax)
{
//deixa apenas o elemento 1 no option, os outros são excluídos
document.frmAjax.codSec.options.length = 1;
idOpcao = document.getElementById("opcoes");
ajax.open("POST", "secoes.jsp", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(ajax.readyState == 1) {
idOpcao.innerHTML = "Carregando seções...!";
}
//após ser processado - chama função processXML que vai varrer os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXMLSecao(ajax.responseXML);
}
else {
//caso não seja um arquivo XML emite a mensagem abaixo
idOpcao.innerHTML = "Selecione a categoria";
}
}
//passa o código da categoria escolhida
var params = "codCat="+document.frmAjax.codCat.value;
ajax.send(params);
}
}
function dadosSecoes()
{
var arr = document.frmAjax.codSec.value;
comboSubSecoes();
}
function comboSubSecoes(ajax)
{
//deixa apenas o elemento 1 no option, os outros são excluídos
document.frmAjax.codSubSec.options.length = 1;
idOpcao = document.getElementById("opcoes");
ajax.open("POST", "subsecoes.jsp", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(ajax.readyState == 1) {
idOpcao.innerHTML = "Carregando subseções...!";
}
//após ser processado - chama função processXML que vai varrer os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXMLSubSecao(ajax.responseXML);
}
else {
//caso não seja um arquivo XML emite a mensagem abaixo
idOpcao.innerHTML = "Selecione a seção";
}
}
//passa o código da categoria escolhida
var params = "codCat="+document.frmAjax.codCat.value + "&codSec="+document.frmAjax.codSec.value;
ajax.send(params);
}
}
function processXMLSecao(obj){
//pega a tag secao
var dataArray = obj.getElementsByTagName("secao");
//total de elementos contidos na tag secao
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var codigo = item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
var descricao = item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
idOpcao.innerHTML = ""; //Selecione a seção
//cria um novo option dinamicamente
var novo = document.createElement("option");
//atribui um ID a esse elemento
novo.setAttribute("id", "opcoes");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.frmAjax.codSec.options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "Selecione a categoria";
}
}
function processXMLSubSecao(obj){
//pega a tag secao
var dataArray = obj.getElementsByTagName("subsecao");
//total de elementos contidos na tag secao
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var codigo = item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
var descricao = item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
idOpcao.innerHTML = ""; //Selecione a seção
//cria um novo option dinamicamente
var novo = document.createElement("option");
//atribui um ID a esse elemento
novo.setAttribute("id", "opcoes");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.frmAjax.codSubSec.options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "Selecione a seção";
}
}
arquivo.jsp
<form name="frmAjax">
<select name="codCat" onChange="dados();">
<option value="0">Selecione a categoria</option>
<option value="1">Categoria1</option>
<option value="2">Categoria2</option>
<option value="3">Categoria3</option>
</select>
<br>
<select name="codSec" onChange="dadosSecoes(this.value);">
<option id="opcoes" value="0">Selecione a categoria</option>
</select>
<br>
<select name="codSubSec">
<option id="opcoes" value="0">Selecione a seção</option>
</select>
</form>