[Resolvido] Firefox $.post ou $.ajax não funciona

[*JASS* 0]

Boa tarde.

 

Tenho uma página com um formulário de busca. Após preencher os campos o usuário clica qem buscar e os resultados devem aparecer numa div específica. Através do jQuery coloquei uma função no botão de busca, quando clicado ele valida os dados, submete por POST, retorna os dados em HTML e preenche a div com o resultado. Funciona perfeitamente bem em qualquer outro navegador menos no Firefox. Ao clicar no botão, o formulário é enviado mas a resposta vem a mesma (segundo o firebug) que já se encontra carregada na div. Ressalto que em qualquer outro navegador o código funciona.

 

Alguém poderia me ajudar?

 

Ai vai o código da função que submete o formulário.

 

function ajaxSubmitToPane(pane,tipo,goal,vals){

              $.ajax({

		type: tipo,//"POST"
		url: goal,//Url de destino
		data: vals,//dados serializados
		success: function(result){

			$("#"+pane+" .bodyPane").html(result);

		}

	});
}

[William Bruno 1501]

pode ser cache da requisição.

 

envie headers para evitar cache, com a tua linguagem server-side.

[*JASS* 0]

Fazendo alguns testes aqui percebi que o problema está no serialize(). Os dados não estão sendo serializados no Firefox. Já tentei serializeArray(), mas também não funciona. Não sei o que fazer, achei que jquery fosse cross browser.

[William Bruno 1501]

mostre onde você está usando essa função, e como você está usando o .serialize()

 

o jQuery é crossbrowser, desde que você siga alguns padrões de codificação.

[*JASS* 0]

if(vdados){
		if(pane){
			var goal = $("#"+form).attr("goal");
			var vals = $('#'+form).serializeArray();
			alert(vals);
			ajaxSubmitToPane(pane,"POST",goal,vals);
		}else{
			alert("No pane");
		}
	}

 

Explicando:

 

essa é parte da função, se houver um painel (div que receberá o resultado) definido ele faz a requisição ajax. O alert foi só para saber se o serialize retornou algo.

[William Bruno 1501]

a variavel goal é pega corretamente ?

 

verificou oq eu disse sobre cache ?

[*JASS* 0]

Sim goal está correto. Vou verificar o cache, mas o mais provavel é que não seja pois subistitui o vals por algo como {key: 43} então funcionou, porém ao voltar para serialize(), a variavel vals retorna vazia.

 

Acabei de verificar o cache. pragma: no-cache. O problema persiste.

[William Bruno 1501]

deixa o serialize lá:

var vals = $('#'+form).serialize();

e poste aqui o html do teu formulário.

 

pelo visto o erro está no html.

[*JASS* 0]

HTML:

 

<form id="serachForm" goal="?c=artigos&f=search" action="#" method="POST">
		<tr>
			<td>
				<input type="text" name="key" value="<?echo $key;?>">
			</td>
			<td>
				<input type="text" name="grup" value="<?echo $grup;?>">
			</td>
			<td>
				<input type="text" name="descr" value="<?echo $descr;?>">
			</td>
		</tr>
	</form>

 

O Botão é externo

 

<button class="formButton formButtonSearch" id="bt1" tipo="submit">Buscar</button>

[William Bruno 1501]

como assim o botão é externo ?

 

tem alguma funçõa js nele ?

sugestão:

<form id="serachForm" action="?c=artigos&f=search" method="post">

e então você usa um return false; no evento onsubmit do formulário.

evite "inventar" atributos, isso geralmente dá problemas.

[*JASS* 0]

O botão é externo ao formulário, eu deixo o action="#" justamente porque ele não é usado. O que define o action do formulário é o goal. Executo a seguinte função após a página carregada:

 

 function aplyFormTools(form,pane){
	$.datepicker.setDefaults( $.datepicker.regional[ "pt-br" ] );
	$('input.masked[tipo=data]').datepicker();
	$('button[tipo=submit]').click(function(){
		validateForm(form,pane);
	});
}

 

Essa função habilita o bt1 a chamar a função validateForm. Cuja parte já está postada.

 

Os inputs nem precisariam estar em um form, se não fosse pelo serialize do jQuery que monta um array (pelo menos deveria) com os campos de um form.

[William Bruno 1501]

O botão é externo ao formulário,

isso está incorreto.

 

eu deixo o action="#" justamente porque ele não é usado.

isso tb está incorreto.

 

 

		$('button[tipo=submit]').click(function(){

e finalmente, isso tb está incorreto.

 

 

você está desenvolvendo de forma "incorreta". Pode "parecer" estar funcionando, mas conceitualmente você está no caminho errado.

 

Sugestão, troque:

                $('button[tipo=submit]').click(function(){
                       validateForm(form,pane);
               });

por:

                $('form').submit(function(){
                       validateForm(form,pane);//form aqui, pode valer $( this )
                       return false;
               });

 

 

dessa forma faz "muito mais sentido" para o código.

é como eu disse não invente atributos. tipo, não existe, use type.

goal não existe, use o action e cancele o form com js, em vez de inventar um atributo.

 

JS deve ser adicionado de forma não obstrutiva. Faça a alteração que sugeri, e volte informando.

[*JASS* 0]

Perfeito. Funcionou beleza ,muito obrigado pelas dicas.