ASP -> AJAX -> Combo dependente

[Ramon Rocha 0]

Olá pessoal,

 

Estou criando uma combo dependente em ASP e estou tendo problemas com dois detalhes:

 

1) Só funciona no IE... No FF apesar de ver a combo na tela, ela não está no form, pois até mesmo um simples alert(document.Formulario.cboRecinto.value) dá erro de objeto não encontrado no Firebug (e consequentemente, tirando o alert para passar o post, o campo não existe e seu valor fica vazio...)

2) Preciso passar o valor do campo que está selecionado na base de dados. Assim quando mostro o form, a combo fica com o item que recuperei do BD, devidamente selecionado.

 

Vejam o código:

 

	<script type="text/javascript" language="JavaScript">
		// A função abaixo pega a versão mais nova do xmlhttp do IE e verifica se é Firefox. Funciona nos dois.
		function createXMLHTTP()
		{
			try
			{
				objAjax = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e)
			{
				try
				{
					objAjax = new ActiveXObject("Msxml2.XMLHTTP");
					alert(objAjax);
				}
				catch(ex)
				{
					try
					{
						objAjax = new XMLHttpRequest();
					}
					catch(exc)
					{
						alert("Esse browser não tem recursos para uso do Ajax");
						objAjax = null;
					}
				}
			return objAjax;
			}
			var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
			for (var i=0; i < arrSignatures.length; i++)
			{
				try
				{
					var objRequest = new ActiveXObject(arrSignatures[i]);
					return objRequest;
				}
				catch (objError)
				{
				}
			}
			throw new Error("MSXML is not installed on your system...");
		}
		function ComboAjax(strValor, strSelected)
		{
			// Criação do objeto XMLHTTP
			var objHTTPRequest = createXMLHTTP();
			// Abrindo a solicitação HTTP. O primeiro parâmetro informa o método post/get
			// O segundo parâmetro informa o arquivo solicitado que pode ser asp, php, txt, xml, etc.
			// O terceiro parametro informa que a solicitacao nao assincrona,
			// Para solicitação síncrona, o parâmetro deve ser false
			objHTTPRequest.open("post", "GComex_Ajax_Seleciona_Recinto.asp?SID=<%=Session("GComex_ID")%>&Selected=" + strSelected, true);
			// Para solicitações utilizando o método post, deve ser acrescentado este cabecalho HTTP
			objHTTPRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			// A função abaixo é executada sempre que o estado do objeto muda (onreadystatechange)
			objHTTPRequest.onreadystatechange = function()
			{
				// O valor 4 significa que o objeto já completou a solicitação
				if (objHTTPRequest.readyState == 4)
				{
					// Abaixo o texto é gerado no arquivo executa.asp e colocado no div
					//document.all.divAjax.innerHTML = oHTTPRequest.responseText;
					document.getElementById("divAjax").innerHTML = objHTTPRequest.responseText;
				}
			}
			// Abaixo é enviada a solicitação. Note que a configuração
			// do evento onreadystatechange deve ser feita antes do send.
			objHTTPRequest.send("Valor=" + strValor);
		}
	</script>

Observem que acrescentei o parâmetro strSelected na função ComboAjax, justamente para passar o valor atual do campo. E ele é passado na URL "... &Selected=" + strSelected".

 

A combo que chama a função:

<select name="cboUrfDestino" onfocus="OnFocusField(this);" onblur="OnBlurField(this);" onChange="javascript:ComboAjax(this.value, '<%=strRecinto%>');">

Observem que passo o valor do campo atual no segundo parâmetro. E verificando o código fonte, o valor está devidamente preenchido.

 

O arquivo GComex_Ajax_Seleciona_Recinto.asp apenas abre o BD, faz um loop nos registros da tabela e monta a combo. Aqui verifico se o valor atual é igual ao valor recebido em:

strSelected = Request("Selected")

Se for, coloco "selected" no item da combo.

 

Enfim, alguém pode me ajudar?

 

Agradeço qualquer ajuda.

 

Grato.

[Ramon Rocha 0]

Pessoal,

 

Resolvi o problema 2, ou seja, consegui fazer o valor atual ser selecionado.

 

Fiz assim:

objHTTPRequest.open("post", "GComex_Ajax_Seleciona_Recinto.asp?SID=<%=Session("GComex_ID")%>", true);

e

objHTTPRequest.send("Valor=" + strValor + "&Selected=" + strSelected);

 

E eu esqueci de acrescentar o 2o. parâmetro na chamada da função no onload do <body>:

<body onload="ComboAjax(document.Formulario.cboUrfDestino.value, '<%=strRecinto%>');">

 

Agora só falta fazer funcionar no FF...

[Ramon Rocha 0]

Tentei uma nova função createXMLHTTP(), mas infelizmente o resultado foi o mesmo, ou seja, NÃO funcionou no FF...

 

		function createXMLHTTP()
		{
	    if (typeof XMLHttpRequest != "undefined") {
	        return new XMLHttpRequest();
	    } else if (window.ActiveXObject) {
	      var arrVersions = [ "MSXML2.XMLHttp.5.0",
	        "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
	        "MSXML2.XMLHttp","Microsoft.XMLHttp"
	      ];
	      for (var i = 0; i < arrVersions.length; i++) {
	        try {
	            var oXmlHttp = new ActiveXObject(arrVersions[i]);
	            return oXmlHttp;
	        } catch (oError) {
	            //Do nothing
	        }
	      }
	    }
	    throw new Error("XMLHttp object could be created.");
		}

[William Bruno 1501]

A forma de criar o combo é que está errada..

document.getElementById("divAjax").innerHTML

não é 'certo', fazer .innerHTML em <select>.. veja essa minha implementação, em que eu formo option por option, apartir de um retorno jSON:

http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/

[Ramon Rocha 0]

Olá William,

 

Obrigado pelo retorno. Não duvido que seja isso, porém não entendo pq funciona no IE e no FF não. Mas enfim, vi seu código, mas não manjo nada de PHP. Sei que usou Jquery e até tenho no meu código, mas não sei como fazer a parte PHP em ASP.

[William Bruno 1501]

ahhh!!! odeio esse fórum qndo resolve dar problema !!

 

em funcionamento:

http://www.wbruno.com.br/scripts/combos-dependentes.php

 

a única coisa que você teria q se preocupar, com o ASP, é responder um objeto jSON, correspondente ao parâmetro enviado por GET:

http://www.wbruno.com.br/scripts/combos-dependentes-function.inc.php?idCombo1=1

[{"nome":"1° Item do Combo1","id":"1"}, {"nome":"2° Item do Combo1","id":"2"}, ]

http://www.wbruno.com.br/scripts/combos-dependentes-function.inc.php?idCombo1=2

[{"nome":"1° Item do Combo1","id":"3"}, {"nome":"2° Item do Combo1","id":"4"}, {"nome":"3° Item do Combo1","id":"5"}, ]

'só isso'.

 

Mas se você não tiver tempo, pra tentar implementar essa solução mais elegante, uma boa gambiarra que vai funcionar, é encapsular o teu select por uma DIV.

então, você usa o .innerHTML da div, para jogar o .responseText lá dentro.. sendo que esse retorno, já deverá conter o <select> completo.. com as tags <select> e os <option>

 

 

Existem várias formas de se fazer uma mesma coisa. Eu considero essa de jogar uma unica string dentro do <select> uma forma bem deselegante, e por experiência, já vi muitos terem problemas com isso. Meio que por isso, postei essa minha solução com jQuery, onde crio cada option individualmente, e vou fazendo o .append(), nunca tive problemas. Isso veio de uma aplicação em javascript puro, que fiz muito tempo atrás:

http://www.pyramidmedical.com.br/js/ajax.js

e também funciona que é uma beleza ^_^ (um dos primeiros códigos com ajax que fiz)

[Ramon Rocha 0]

O problema está justamente onde a <DIV> recebe o código HTML. Ou seja no IE é uma beleza... No FF você vê a combo, usa, seleciona... Mas na hora do post não existe o campo...

 

A idéia de usar Jquery é bem-vinda sim, já usei ele com alguns exemplos na net e todos funcionam muito bem, em todos os browsers.

 

Eu acabei tirando a combo dependente da página. Era uma só e já tinha perdido muito tempo nisso. Então vou dando seguimento no projeto, deixando a página recarregar, e depois eu implemento isso com calma.

 

Valew mesmo por todas as dicas. Irei ver isso com mais tranquilidade.

 

Grato.

[William Bruno 1501]

hum.. ? estranho isso que você falou agora.. oque retorna:

alert( objHTTPRequest.responseText );

?