[Resolvido] Problema com Ajax no firefox

[McrOnline 0]

Olá,

 

Estou tendo um problema estranho com Ajax.

Eu insiro alguns campos dentro de um formulário através do ajax.

Basicamente é isso:

 

Antes

<form action="teste.php" method="post">
   <div id="teste"></div>
   <input type="submit" value="enviar">
</form>

Depois

<form action="teste.php" method="post">
   <div id="teste"><input type="hidden" name="test_field" value="ok"></div>
   <input type="submit" value="enviar">
</form>

O script Ajax funciona como deveria. O problema é na hora do envio do formulario. Ele simplesmente não envia os dados do campo que foi inserido no form. O mais estranho é que isso acontece somente no FF, no IE funciona normalmente.

Não é mostrado nenhum erro no console de erros.

Meu firefox é última versão.

 

to doidão. alguem já passou por isso?

 

abs

[quintelab 91]

Movido Outras Linguagens de Programação http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML > Ajax

[ZioNN 0]

Postando código para análise. Por favor, ajudem. Já dei uma bela googlada e nada.

 

Funciona perfeitamente no IE, mas no FF e Chrome não funciona. O que acontece é que, ao escolher o Distrito, o drop-down de cidade é exibido corretamente mas depois que o usuário seleciona a cidade e envia o formulário, o valor de "distrito" é enviado normalmente pelo form mas o valor de cidade vai vazio (ou nulo). Quando capturo os valores com o Request("cidade") ou Request.Form("cidade"), não vem nada.

 

Mas não dá qualquer tipo de erro também. É como se estivesse funcionando corretamente mas não envia o valor da cidade.

 

Meu form (sem os códigos para o acesso ao BD e loop pra simplificar)

 

<select name="distrito" class="box_filtro" id="distrito" onChange="comboCidade();">
	<option value="">.:Selecione</option>
	<option value="<%=objRsList("cod_distrito")%>"><%=objRsList("nome_distrito")%></option>
</select>
<span id="divcomboCidade">
	<select name="cidade" class="box_filtro_generic" id="cidade" >
	<option value="">.:Selecione</option>
	</select>
</span>

função ajax

function comboCidade()
{
	var sDistrito = document.getElementById('distrito').value;
	var comboCidade = createXMLHTTP();
	comboCidade.open("post", "ajax/ajax_igreja_cidade.asp", true);
	comboCidade.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	comboCidade.onreadystatechange=function(){
	   if (comboCidade.readyState==4){
		  document.getElementById('divcomboCidade').innerHTML = comboCidade.responseText;		  
		  }
	}
	comboCidade.send("coddistrito=" + sDistrito);
}

[William Bruno 1501]

como está vindo o teu responseText ?

 

eu prefiro fazer cada option manualmente, do que substituir todo o HTML...

 

um exemplo que fiz usando jQuery:

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

[ZioNN 0]

Olá William, obrigado por ajudar.

 

Dei uma olhada no teu código. Não creio que eu tenha que alterar todo o esquema. O "gato" deve estar em algo simples, na forma como o FF e o Chrome trata esse HTML inserido via AJAX. Quando submeto o form via GET, na URL nem vai a chave "cidade", como se ela não existisse no formulário. Ao que parece, o FF ignora o campo alterado via AJAX. Em outras páginas em que utilizo este mesmo script, ele funciona normalmente. Já comparei e não detectei nada que pudesse estar alterando o comportamento do código. Lembrando que no IE8 funciona perfeitamente!

 

O responseText tá vindo assim:

 

<select name="cidade" id="cidade" class="box_filtro_generic" >
	<option value="">.: Selecione</option>
 
		<option value="4789">Altinópolis</option>
 
		<option value="4797">Américo Brasiliense</option>
 
		<option value="4814">Araraquara</option>
 
		<option value="4841">Barrinha</option>
 
		<option value="4844">Batatais</option>
 
		<option value="4853">Boa Esperança do Sul</option>
 
		<option value="4867">Brodowski</option>
 
		<option value="4876">Caconde</option>
 
		<option value="4884">Cajuru</option>
 
		<option value="4901">Casa Branca</option>
 
		<option value="4924">Cravinhos</option>
 
		<option value="4930">Descalvado</option>
 
		<option value="4933">Divinolândia</option>
 
		<option value="4934">Dobrada</option>
 
		<option value="4940">Dumont</option>
 
		<option value="4965">Franca</option>
 
		<option value="4972">Gavião Peixoto</option>
 
		<option value="4981">Guará</option>
 
		<option value="4990">Guariba</option>
 
		<option value="5001">Ibaté</option>
 
		<option value="5004">Ibitinga</option>
 
		<option value="5009">Igarapava</option>
 
		<option value="5024">Ipuã</option>
 
		<option value="5040">Itápolis</option>
 
		<option value="5049">Itirapina</option>
 
		<option value="5051">Itobi</option>
 
		<option value="5054">Ituverava</option>
 
		<option value="5056">Jaboticabal</option>
 
		<option value="5064">Jardinópolis</option>
 
		<option value="5091">Luís Antônio</option>
 
		<option value="5109">Matão</option>
 
		<option value="5122">Mococa</option>
 
		<option value="5130">Monte Alto</option>
 
		<option value="5136">Morro Agudo</option>
 
		<option value="5138">Motuca</option>
 
		<option value="5151">Nova Europa</option>
 
		<option value="5159">Nuporanga</option>
 
		<option value="5166">Orlândia</option>
 
		<option value="5188">Patrocínio Paulista</option>
 
		<option value="5196">Pedregulho</option>
 
		<option value="5216">Pirangi</option>
 
		<option value="5221">Pitangueiras</option>
 
		<option value="5228">Pontal</option>
 
		<option value="5238">Pradópolis</option>
 
		<option value="5258">Restinga</option>
 
		<option value="5260">Ribeirão Bonito</option>
 
		<option value="5262">Ribeirão Corrente</option>
 
		<option value="5267">Ribeirão Preto</option>
 
		<option value="5268">Rifaina</option>
 
		<option value="5269">Rincão</option>
 
		<option value="5283">Sales Oliveira</option>
 
		<option value="5298">Santa Cruz das Palmeiras</option>
 
		<option value="5300">Santa Ernestina</option>
 
		<option value="5304">Santa Lúcia</option>
 
		<option value="5308">Santa Rita do Passa Quatro</option>
 
		<option value="5309">Santa Rosa de Viterbo</option>
 
		<option value="5326">São Carlos</option>
 
		<option value="5332">São Joaquim da Barra</option>
 
		<option value="5335">São José do Rio Pardo</option>
 
		<option value="5347">São Sebastião da Grama</option>
 
		<option value="5348">São Simão</option>
 
		<option value="5353">Serra Azul</option>
 
		<option value="5355">Serrana</option>
 
		<option value="5356">Sertãozinho</option>
 
		<option value="5367">Tabatinga</option>
 
		<option value="5371">Taiaçu</option>
 
		<option value="5372">Taiúva</option>
 
		<option value="5378">Taquaritinga</option>
 
</select>

[ZioNN 0]

Bem, depois de testar e retestar comecei a partir para soluções improváveis e entre elas alterar o posicionamento das tags <form> e </form> dentro do HTML da página.

 

Resumidamente eu tinha mais ou menos assim (pra evitar o espaçamento que a tag form provoca no HTML):

 

<form>

<table>

<table>

<table>

<table>

<select>

</select>

</table>

</table>

</table>

</table>

</form>

 

E mudei pra isso (tratando o espaçamento no CSS):

 

 

<table>

<table>

<table>

<form style="margin:0;padding:0;">

<table>

<select>

</select>

</table>

</form>

</table>

</table>

</table>

 

e funcionou, tanto no IE, qto no FF e Chrome. Resultado visual semelhante.

 

Alguém tem uma explicação para o FF não reconhecer só o campo "cidade" quando a tag <form> está posicionada muio acima na hierarquia? Gostaria muito de saber para não cometer erros semelhantes no futuro.

 

Valeu!