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%"> </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.