Ajax não funciona no Mozilla

[Raphael Weber]

Bom dia pessoal, eu estou tentando carregar uma lista sem dar refresh, e para isso estou usando o ajax com o jquery, segue o codigo.

 

function listarUsuarios() {
	
	var form = event.srcElement.form;
	
	if ((trim(form.idPostoFilialSelecionado.value) == "") && (form.idPostoFilialSelecionado.selectedIndex < 2)) {
		alert(msg1);
		return false;
	} 
	
	$(document).ready(function(e) {
	    
	    $("form[ajax=true]").submit(function(e) {
	        
	        e.preventDefault();
	        
	        var form_data = $(this).serialize();
	        var form_url = $(this).attr("action");
	        var form_method = $(this).attr("method").toUpperCase();
	                     
	        $.ajax({
	            url: form_url, 
	            type: form_method,      
	            data: form_data,     
	            cache: false,
	            success: function(){                          
	            	$("#principal").load(form_url);
	            }           
	        });    
	     

		}
	)})
}

 

Segue o html abaixo:

 

<form method="post" action="ListarUsuarios.sma" ajax="true">

	<!-- Titulo -->
	<div class="title">Consulta de Usuários</div>

	<!-- Search Parameters -->
	<div class="search">
	<table class="searchTable" cellpadding="4" cellspacing="0" border="0">
		<tr>
			<td width="30%" class="label">Posto / Filial:</td>
			<td width="50%">
				<lay:select property="idPostoFilialSelecionado" bean="webBean" list="listaPostoFilial" title="true" discard="true" style="width:100%;">
					<lay:option valueprop="id" textlast="pontoDeVenda"/>
				</lay:select>
			</td>
			<td width="20%">&nbsp;</td>
		</tr>
		
		<tr>
			<td width="30%" class="label">Tipo de Visão:</td>
			<td width="50%">
				<select id="visao" name="idTipoVisaoSelecionado" width:"100%">
					<option value="">Selecione ...</option>
					<option value="">-------------------------------------------------------------------------------------------</option>
					<option value="P" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("P")) ? "selected" : "") : ""%>>Posto / Filial</option>
					<option value="C" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("C")) ? "selected" : "") : ""%>>Cliente</option>
					<option value="A" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("A")) ? "selected" : "") : ""%>>Administrador - Sem Restrições</option>
					<option value="G" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("G")) ? "selected" : "") : ""%>>Gerência de Conta</option>
				</select>
			</td>
			<td width="20%"><input name="listar" type="submit" class="optionButton" value="Listar" onclick="listarUsuarios();"></td>
		</tr>
	</table>
	</div>

O engraçado é que no chrome funciona.

 

OBS: Já tentei alterar o atributo type ="button" e já tentei colocar return false; após a função listarUsuarios(); dentro do atrbuto onclick.

 

 

Agradeço desde já se alguém puder me ajudar a resolver esse erro. Estou travado aqui no trabalho.

 

Um grande abraço e uma ótima sexta a todos. :)

Agora, Raphael Weber disse:

Bom dia pessoal, eu estou tentando carregar uma lista sem dar refresh, e para isso estou usando o ajax com o jquery, segue o codigo.

 

function listarUsuarios() {
	
	var form = event.srcElement.form;
	
	if ((trim(form.idPostoFilialSelecionado.value) == "") && (form.idPostoFilialSelecionado.selectedIndex < 2)) {
		alert(msg1);
		return false;
	} 
	
	$(document).ready(function(e) {
	    
	    $("form[ajax=true]").submit(function(e) {
	        
	        e.preventDefault();
	        
	        var form_data = $(this).serialize();
	        var form_url = $(this).attr("action");
	        var form_method = $(this).attr("method").toUpperCase();
	                     
	        $.ajax({
	            url: form_url, 
	            type: form_method,      
	            data: form_data,     
	            cache: false,
	            success: function(){                          
	            	$("#principal").load(form_url);
	            }           
	        });    
	     

		}
	)})
}

 

Segue o html abaixo:

 

<form method="post" action="ListarUsuarios.sma" ajax="true">

	<!-- Titulo -->
	<div class="title">Consulta de Usuários</div>

	<!-- Search Parameters -->
	<div class="search">
	<table class="searchTable" cellpadding="4" cellspacing="0" border="0">
		<tr>
			<td width="30%" class="label">Posto / Filial:</td>
			<td width="50%">
				<lay:select property="idPostoFilialSelecionado" bean="webBean" list="listaPostoFilial" title="true" discard="true" style="width:100%;">
					<lay:option valueprop="id" textlast="pontoDeVenda"/>
				</lay:select>
			</td>
			<td width="20%">&nbsp;</td>
		</tr>
		
		<tr>
			<td width="30%" class="label">Tipo de Visão:</td>
			<td width="50%">
				<select id="visao" name="idTipoVisaoSelecionado" width:"100%">
					<option value="">Selecione ...</option>
					<option value="">-------------------------------------------------------------------------------------------</option>
					<option value="P" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("P")) ? "selected" : "") : ""%>>Posto / Filial</option>
					<option value="C" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("C")) ? "selected" : "") : ""%>>Cliente</option>
					<option value="A" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("A")) ? "selected" : "") : ""%>>Administrador - Sem Restrições</option>
					<option value="G" <%=(webBean.getIdTipoVisaoSelecionado() != null) ? ((webBean.getIdTipoVisaoSelecionado().equals("G")) ? "selected" : "") : ""%>>Gerência de Conta</option>
				</select>
			</td>
			<td width="20%"><input name="listar" type="submit" class="optionButton" value="Listar" onclick="listarUsuarios();"></td>
		</tr>
	</table>
	</div>

O engraçado é que no chrome funciona.

 

OBS: Já tentei alterar o atributo type ="button" e já tentei colocar return false; após a função listarUsuarios(); dentro do atrbuto onclick.

 

 

Agradeço desde já se alguém puder me ajudar a resolver esse erro. Estou travado aqui no trabalho.

 

Um grande abraço e uma ótima sexta a todos. :)

O resultado esperado é que ele chame um evento dentro da div #principal.