[Resolvido] Porque está função não funciona no IE? AJAX

programation · Outubro 20, 2011

Olá pessoal.

Estou ultilizando está função no meu projeto e não está funcionando no IE, alguém sabe o porque?

Preciso arrumar este bug mas não sei qual é o erro. Quem souber a resposta, por favor, me ajude postando-a.

html

<script type="text/javascript" language="javascript" src="ajax.js"></script>
<script type="text/javascript" language="javascript" src="js.js"></script>

ajax.js

var req;

// FUNÇÃO PARA BUSCA CIDADE *******************************
function buscarEstado(valor)
{

if(valor != "")
{

	// Verificando Browser
	if(window.XMLHttpRequest)
	{
       req = new XMLHttpRequest();
	}
	else
	{
       req = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// Arquivo PHP juntamente com o valor digitado no campo (método GET)
	var url = "busca_cidade.php?estado="+valor;

	// Chamada do método open para processar a requisição
	req.open("Get", url, true);

	// Quando o objeto recebe o retorno, chamamos a seguinte função;
	req.onreadystatechange = function()
	{

		// Verifica se o Ajax realizou todas as operações corretamente
		if(req.readyState == 4 && req.status == 200)
		{

			// Resposta retornada pelo busca.php
			var resposta = req.responseText;			

			// Abaixo colocamos a(s) resposta(s) na div resultado
			document.getElementById('cidade').innerHTML = resposta;

			document.getElementById('cidade').disabled = "";
		}
	}
	req.send(null);
}
else
{
	var cidade = document.getElementById('cidade');
	var bairro = document.getElementById('bairro');
	var tipo = document.getElementById('tipo');
	var vl = document.getElementById('c_comprar_alugar');

	cidade.innerHTML = 	"<option value=''>Cidade</option>";
	bairro.innerHTML = "<option value=''>Bairro</option>"
	tipo.innerHTML = "<option value=''>Tipo</option>";
	vl.innerHTML = "<option value=''>Comprar ou Alugar</option>";

	cidade.disabled = 1;
	bairro.disabled = 1;
	tipo.disabled = 1;
	vl.disabled = 1;
}
}

William Bruno · Outubro 20, 2011

em qual IE você está testando ?

o seu método de instanciar o objeto ajax está fraco. Use este:

function getHTTPObject(){
       if(window.XMLHttpRequest){
               return new XMLHttpRequest();
       }else if(window.ActiveXObject){
               var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
               for(var i = 0; i < prefixes.length; i++){
                       try     {
                               return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                       } catch (e) {}
               }
       }
}
var req = getHTTPObject();

programation · Outubro 20, 2011

Eu não entendo muuuuito de AJAX, mas eu testei aqui e não funcionou no IE.

Estou testando no IE 7.

Creio eu que o problema está na hora da "resposta" do AJAX:

// Verifica se o Ajax realizou todas as operações corretamente
			if(req.readyState == 4 && req.status == 200)
		{

			// Resposta retornada pelo busca.php
			var resposta = req.responseText;			

			// Abaixo colocamos a(s) resposta(s) na div resultado
           	document.getElementById('cidade').innerHTML = resposta; // ***************************************** ESSA PARTE *****************************************

			document.getElementById('cidade').disabled = "";
		}

porque? Porque quando vou testar ele habilita (....disabled = ""; ) o campo com ID = cidade, porém, ele não escreve nada, sendo que o ....innerHTML = resposta; era pra escrever pelo menos 1 coisa.

Não sei se vai ser útil o que notei, mas estamos quase na resposta desde tópico. O que eu falei tem sentido?

function getHTTPObject(){
   	if(window.XMLHttpRequest){
           	return new XMLHttpRequest();
   	}else if(window.ActiveXObject){
           	var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
           	for(var i = 0; i < prefixes.length; i++){
                   	try 	{
                           	return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                   	} catch (e) {}
           	}
   	}
}

var req = getHTTPObject();

// FUNÇÃO PARA BUSCA CIDADE *******************************
function buscarEstado(valor)
{

if(valor != "")
{

	// Arquivo PHP juntamente com o valor digitado no campo (método GET)
	var url = "busca_cidade.php?estado="+valor;

	// Chamada do método open para processar a requisição
	req.open("Get", url, true);

	// Quando o objeto recebe o retorno, chamamos a seguinte função;
	req.onreadystatechange = function()
	{

		// Verifica se o Ajax realizou todas as operações corretamente
		if(req.readyState == 4 && req.status == 200)
		{

			// Resposta retornada pelo busca.php
			var resposta = req.responseText;			

			// Abaixo colocamos a(s) resposta(s) na div resultado
			document.getElementById('cidade').innerHTML = resposta;

			document.getElementById('cidade').disabled = "";
		}
	}
	req.send(null);
}
else
{
	var cidade = document.getElementById('cidade');
	var bairro = document.getElementById('bairro');
	var tipo = document.getElementById('tipo');
	var vl = document.getElementById('c_comprar_alugar');

	cidade.innerHTML = 	"<option value=''>Cidade</option>";
	bairro.innerHTML = "<option value=''>Bairro</option>"
	tipo.innerHTML = "<option value=''>Tipo</option>";
	vl.innerHTML = "<option value=''>Comprar ou Alugar</option>";

	cidade.disabled = 1;
	bairro.disabled = 1;
	tipo.disabled = 1;
	vl.disabled = 1;
}
}

William Bruno · Outubro 20, 2011

cidade é um input ?

se for, você deve fazer assim:

 document.getElementById('cidade').value = resposta;

programation · Outubro 20, 2011

cidade é um input ?

se for, você deve fazer assim:
 document.getElementById('cidade').value = resposta;

não é um input, é um select, vou postar

html

<table border="1" cellspacing="10">
           	<form name="consulta" method="post" action="pesquisar_imovel.php">
				<tr>
					<td style="text-align:center; vertical-align:middle;">
                   		<input type="text" name="c_codigoi" value="" />
                   	</td>
					<td style="text-align:center; vertical-align:middle;">
						<select name="c_estado" style="width:65px" id="estado" onchange="buscarEstado(this.value);">
							<option value="">Estado</option>
                  				<?php buscar_estado(); ?>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select name="c_cidade" style="width:140px" id="cidade" onchange="buscarCidade(this.value);" disabled="disabled">
							<option value="">Cidade</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select name="c_bairro" style="width:165px" id="bairro" onchange="buscarBairro(this.value);" disabled="disabled">
							<option value="">Bairro</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select name="c_tipo" style="width:123px" id="tipo" onchange="buscarTipo(this.value);" disabled="disabled">
							<option value="">Tipo</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select name="c_comprar_alugar" style="width:133px" id="c_comprar_alugar" disabled="disabled">
							<option value="">Comprar e Alugar</option>
						</select>
					</td>
					<td align="center" width="106" height="26"><a href="#" onclick="enviarConPesImo();"><div class="cabe_buscar_imoveis"></div></a></td>
				</tr>
          		</form>
			</table>

William Bruno · Outubro 20, 2011

ok, então para o select, você deve criar cada option na mão, e não retornar todo o html direto.

mais ou menos assim:

http://wbruno.com.br/blog/2009/10/06/combos-dependentes-ajax-jquery/

ali onde faço o createElement()

programation · Outubro 20, 2011

Eu não entendo de JQuery, mas eu sei que é possível em AJAX.

Obrigado pelo post, mas gostaria que fosse em AJAX, sendo que no Mozilla e outros funciona, só falta funcionar no IE.

Eu estou estudando AJAX e durante esse processo me deparei com este probleminha ao qual pela pouca experiência ainda não consegui encontrar o erro sosinho.

Alguém tem uma solução em AJAX para o funcionamento completo deste código no IE? (creio que não precisa mudar muita coisa)

William Bruno · Outubro 20, 2011

Alguém tem uma solução em AJAX para o funcionamento completo deste código no IE?

amigo.. você está confundindo as coisas.

Ajax é uma tecnologia.

A linguagem por trás é javascript

jQuery é apenas uma lib que usa javascript. Independente de qq coisa, tb existe ajax com jquery, por isso q não tem coerencia a sua frase.

a solução q te propus, é puramente javascript. Analise o trecho do createElement, e implemente com js.

Para isso, você terá q retornar um json (notação javascript de objeto), e formar cada option indivualmente. Para isso você não precisa usar jQuery, mas pode usar o exemplo q linkei como guia.

o problema do seu código, é essa tentativa de acessar a propriedade .innerHTML do objeto select.

Isto que está errado, e deve ser alterado. A forma correta é com os createElement() conforme exemplifiquei.

programation · Outubro 21, 2011

Sim, com certeza, foi uma forma de expressão.

Mas como assim "forma correta é com os createElement()", pergunto no sentido de como eu vou utilizar esta função, pegando todo o exemplo que você me passou através do link a cima, ou simplesmente pegar aquela parte do código do exemplo onde fala sobre createElement() ?

O que eu quero realmente fazer, é criar uma programação igual a este site http://www.br.brookfield.com/SP, bem na parte onde tem os campos selects com os nomes Cidade, Bairro, Tipo e Área. Meu estudo final tem que ser igual a este exemplo que passei, estou buscando recursos e informações de forma resumida. Peço apoio a todos porque é algo um pouco que complexo para mim.

Até lá eu vou estudando código que me passou William Bruno, obrigado!

Se alguém tiver um outro exemplo, por favor, poste-o.

Grato.

William Bruno · Outubro 21, 2011

Sim, com certeza, foi uma forma de expressão.

tenta evitar esse tipo de expressão, pois no mundo da programação, isso pode tornar as coisas muito confusas.

como dizer que: preciso fazer um script em Java.

Te direcionariam para o forum de Java, que é uma linguagem multiplataforma q roda sob uma virtual machine.

sendo q na verdade, você queria falar de "javascript". Oq está errado, e causa confusão.

Por isso que evite usar essas "expressões", prefira falar corretamente.

ou simplesmente pegar aquela parte do código do exemplo onde fala sobre createElement() ?

basicamente só o trecho q fiz o createElement(), desde que você retorne um jSON, e não mais o html atual.

programation · Outubro 21, 2011

Ok, entendi.

Vou tentar fazer o que me passou; já já eu posto...

Pessoal, agradeço a todos, eu corri atrás de tentar fazer em JQuery e consegui, vou postar pra vocês.

html e JQuery


<form name="consulta" method="post" action="pesquisar_imovel.php">

			  <script type="text/javascript" language="javascript">
                   $(document).ready(function() {

					//buscar cidade
                       $('#estado').change(function() {							
						$.post("busca_cidade.php", { estado: consulta.estado.value }, function(result){
								$("#cidade").html(result);
						});							
						//habilitando e desabilitando campo cidade
						if(consulta.estado.value == '') {
                            $('#cidade').attr('disabled', true);
                           	$('#bairro').attr('disabled', true);
                           	$('#tipo').attr('disabled', true);
                           	$('#vl').attr('disabled', true);

                            $('#cidade').html('<option value="">Cidade</option>');
                           	$('#bairro').html('<option value="">Bairro</option>');
                           	$('#tipo').html('<option value="">Tipo</option>');
                           	$('#vl').html('<option value="">Comprar e Alugar</option>');
						}
						else								
                            $('#cidade').attr('disabled', '');
                       });

					//buscar bairro
					$('#cidade').change(function() {							
						$.post("busca_bairro.php", { cidade: consulta.cidade.value }, function(result){
								$("#bairro").html(result);
						});							
						//habilitando campo bairro
						if(consulta.cidade.value == '') {
                           	$('#bairro').attr('disabled', true);
                           	$('#tipo').attr('disabled', true);
                           	$('#vl').attr('disabled', true);

                           	$('#bairro').html('<option value="">Bairro</option>');
                           	$('#tipo').html('<option value="">Tipo</option>');
                           	$('#vl').html('<option value="">Comprar e Alugar</option>');
						}
						else
                           	$('#bairro').attr('disabled', '');
                       });

					//buscar tipo
					$('#bairro').change(function() {							
						$.post("busca_tipo.php", { bairro: consulta.bairro.value }, function(result){
								$("#tipo").html(result);
						});							
						//habilitando campo bairro
						if(consulta.bairro.value == '') {
                           	$('#tipo').attr('disabled', true);
                           	$('#vl').attr('disabled', true);

                           	$('#tipo').html('<option value="">Tipo</option>');
                           	$('#vl').html('<option value="">Comprar e Alugar</option>');
						}
						else
                           	$('#tipo').attr('disabled', '');
                       });

					//buscar vl
					$('#tipo').change(function() {							
						$.post("busca_vl.php", { bairro: consulta.bairro.value, tipo: consulta.tipo.value }, function(result){
								$("#vl").html(result);
						});							
						//habilitando campo bairro
						if(consulta.tipo.value == '') {
                           	$('#vl').attr('disabled', true);
                           	$('#vl').html('<option value="">Comprar e Alugar</option>');
						}
						else
                           	$('#vl').attr('disabled', '');
                       });
                   });
                   </script>

				<tr>
					<td style="text-align:center; vertical-align:middle;">
                       	<input type="text" name="c_codigoi" value="" />
                       </td>
					<td style="text-align:center; vertical-align:middle;">
						<select style="width:65px" name="estado" id="estado">
							<option value="">Estado</option>
                      			<?php buscar_estado(); ?>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;" id="td_cidade">
						<select style="width:140px" name="cidade" id="cidade" disabled="disabled">
							<option value="">Cidade</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;" id="td_bairro">
						<select style="width:165px" name="bairro" id="bairro" disabled="disabled">
							<option value="">Bairro</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select style="width:123px" name="tipo" id="tipo" disabled="disabled">
							<option value="">Tipo</option>
						</select>
					</td>
					<td style="text-align:center; vertical-align:middle;">
						<select style="width:133px" name="vl" id="vl" disabled="disabled">
							<option value="">Comprar e Alugar</option>
						</select>
					</td>
					<td align="center" width="106" height="26"><a href="#" onclick="javascript: document.consulta.submit();"><div class="cabe_buscar_imoveis"></div></a></td>
				</tr>
              	</form>

Está funcionando e sem bugs!

Até mais.

Grato!

Arquivado

[Resolvido] Porque está função não funciona no IE? AJAX

Recommended Posts

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

programation 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante