[RESOLVIDO] Vraptor + AJAX - Problemas no retorno da requisição

19 de março de 2013 8 respostas

talita.h 19 de março de 2013

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:

Controller

@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.

8 Respostas

Rafael_Guerreiro 19 de mar. de 2013

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…

talita.h 19 de mar. de 2013

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>

Lucas_Cavalcanti 19 de mar. de 2013

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/

talita.h 19 de mar. de 2013

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.

Lucas_Cavalcanti 19 de mar. de 2013

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?

talita.h 19 de mar. de 2013

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.

talita.h 19 de mar. de 2013

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!

talita.h 20 de mar. de 2013

Segue solução final:

Controller

@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!

Criado 19 de março de 2013

Ultima resposta 20 de mar. de 2013

Respostas 8

Participantes 3

8 Respostas

Topicos relacionados