Boa tarde!
Tenho uma tela modal com um form. Faço o submit deste form com ajax, e no meu controller faço validações nos dados informados. Até aí tudo ok, o método no controller recebe os dados corretamente, e faz as validações corretamente.
O problema ocorre no retorno. Gostaria de apresentar o retorno deste método na própria modal, em uma div, mas não consigo fazer isto. A página sempre é atualizada, e desta forma carrega o jsp da janela modal na página inteira (e acaba ficando inclusive sem formatação).
Meu código está assim:
@Post("/usuario")
public void cadastrar(Usuario usuario) {
try {
business.incluir(usuario);
result.use(Results.http()).body("gravou usuário");
} catch (BusinessException e) {
result.use(Results.http()).body("usuário já existe");
}
}
<form id="cadastrarUsuarioForm" action="<c:url value="/usuario"/>" method="post">
<input type="text" id="emailUsuario" name="usuario.email" >
<input type="text" id="nomeExibicaoUsuario" name="usuario.nomeExibicao" >
<button id="salvarButton" >Salvar</button>
<div id="retorno">gostaria que o retorno viesse aqui</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#salvarButton').click(function(){
$.ajax({
type : 'post',
url : '/MeuProjeto/usuario',
dataType : 'text',
data : {
'usuario.email' : $("#emailUsuario"),
'usuario.nomeExibicao' : $("#nomeExibicaoUsuario")
},
success: function(retorno){
$("#retorno").html(retorno);
}
});
return false;
});
});
</script>
Alguém tem uma dica de o que eu estou fazendo errado?
Desde já agradeço.
Eu trocaria isso:
$('#salvarButton').click(function(){
$.ajax({
type : 'post',
url : '/MeuProjeto/usuario',
dataType : 'text',
data : {
'usuario.email' : $("#emailUsuario"),
'usuario.nomeExibicao' : $("#nomeExibicaoUsuario")
},
success: function(retorno){
$("#retorno").html(retorno);
}
});
return false;
});
por isso:
$('#cadastrarUsuarioForm').on('submit', function(event){
$.ajax({
type : 'post',
url : '/MeuProjeto/usuario',
dataType : 'text',
data : {
'usuario.email' : $("#emailUsuario"),
'usuario.nomeExibicao' : $("#nomeExibicaoUsuario")
},
success: function(retorno){
$("#retorno").html(retorno);
}
});
event.stopPropagation();
event.preventDefault();
return false;
});
Isso deve resolver…
Olá Rafael!
Fiz a mudança que você sugeriu e continuo não obtendo o resultado esperado.
Após clicar no botão, na url aparece “http://localhost:8080/MeuProjeto/usuario” e carrega a seguinte página:
<html>
<head></head>
<body>
<pre>usuário já existe</pre>
</body>
</html>
se esse botão é um submit de um form, vc tem que fazer o callback no form, não no botão… mude para:
$('#id-do-form').submit(function() {
//código do ajax aqui
return false;
});
ou ainda usar o plugin de ajax form
http://www.malsup.com/jquery/form/
Lucas, este “result.use(Results.http()).body(”");" está correto?
@Post("/usuario")
public void cadastrar(Usuario usuario) {
try {
business.incluir(usuario);
result.use(Results.http()).body("gravou usuário");
} catch (BusinessException e) {
result.use(Results.http()).body("usuário já existe");
}
}
Tenho a impressão que isto é que está causando o problema, mas não sei qual seria a forma correta de fazer este retorno.
o que isso faz é que o corpo da requisição seja o texto que vc passou… isso não influencia na mudança de página. É problema no javascript.
Vc testou a versão com o .submit() do form ao invés do .click() do botao?
Testei, com este código:
<form id="cadastrarUsuarioForm" action="<c:url value="/usuario"/>" method="post">
<input type="text" id="emailUsuario" name="usuario.email" >
<input type="text" id="nomeExibicaoUsuario" name="usuario.nomeExibicao" >
<button id="salvarButton" >Salvar</button>
<div id="retorno">gostaria que o retorno viesse aqui</div>
</form>
<script type="text/javascript">
$('#cadastrarUsuarioForm').submit(function() {
$.ajax({
type : 'post',
url : '/MeuProjeto/usuario',
dataType : 'text',
data : {
'usuario.email' : $("#emailUsuario"),
'usuario.nomeExibicao' : $("#nomeExibicaoUsuario")
},
success: function(retorno){
$("#retorno").html(retorno);
}
});
return false;
});
</script>
Continua redirecionando para página em branco, apenas com a mensagem de retorno.
Resolvi testar o plugin indicado (em http://www.malsup.com/jquery/form/), e já consegui o retorno sem o refresh. Ainda não está aparecendo na div, mas creio que isto seja apenas algum detalhe. Quando conseguir solucionar, posto todo o código aqui.
Obrigada!
Segue solução final:
@Post("/usuario")
public void cadastrar(Usuario usuario) {
try {
business.incluir(usuario);
result.use(Results.http()).body("gravou usuário");
} catch (BusinessException e) {
result.use(Results.http()).body("usuário já existe");
}
}
<form id="cadastrarUsuarioForm" action="<c:url value="/usuario"/>" method="post">
<input type="text" id="emailUsuario" name="usuario.email" >
<input type="text" id="nomeExibicaoUsuario" name="usuario.nomeExibicao" >
<button id="salvarButton" >Salvar</button>
<div id="retorno">gostaria que o retorno viesse aqui</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
var options = {
target:'#retorno',
success: showResponse,
dataType: 'text'
};
$('#cadastrarUsuarioForm').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
function showResponse(responseText, statusText, xhr, $form) {
$('#retorno').html(responseText);
}
</script>
Com o plugin para submeter forms ficou muito fácil.
Obrigada pela ajuda!