[RESOLVIDO]Retornar parte de Html(div) com Vraptor com metodo via AJAX

17 de junho de 2011 8 respostas

Rfuhr 17 de junho de 2011

Boa Tarde.

Estou tendo a seguinte dificuldade. Estou montando uma rotina para calculo de icms para lucro presumido, e posso ter estrutura variavel de grupos e sub.grupos de contas. Para resolver isto. pretendo montar minha jsp de forma dinamica. Para isto tenho minha jsp, aqui vou chamar teste.jsp. onde utilizo jquery acordion. tenho uma div que coloco com accordion. e o conteudo desta div. deve vir de forma dinamica. Pensei em utilizar o Vraptor, retornando esta minha estrutura de div de "conteudo", chamando via AJAX

Estou com a seguinte duvida:
1. No meu controller, a melhor forma de retorno seria montar um String e retornar este.
2. Como fazer este chamado via ajax, já que não estou conseguindo.

Para entender um pouco segue os codigos:

TesteController:

@Resource
public class TesteController {
	private final Result result;

	public TesteController(Result result) {
		this.result = result;
	}
	
	@Path("/teste")
	public void teste() {
	}

	@Get @Path("/teste/testehtml")
	public void testehtml() {
		System.out.println("Teste");
		result.include("meusdiv","<b>Rodrigo</b>");
	}
	
}

teste.jsp

<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
	      	type: "GET",
	      	url: "<c:url value="/teste/testehtml"/>",
	      	sucess: function() {
	      		
                                //esta parde de append deve vir do metodo do controller. Logico que será apenas uma linha, com o retorno do metodo. 
				$("#apuracao").append("<h3><a href=\"#\">A) CRÉDITO PRESUMIDO</a></h3>");
				$("#apuracao").append("<div>Valores</div>");
		
				$("#apuracao").append("<h3><a href=\"#\">DEMONSTRATIVO BASE PARA CRÉDITOS PROPORCIONAIS</a></h3>");
				$("#apuracao").append("<div>Valores2</div>");

                                //como faço para colocar pegar e colocar o retorno do metodo testehtml

				
				$( "#apuracao" ).accordion({
					collapsible: false
				});
	      	}
    	});
		
		});	
</script>

	
<div id="apuracao">Apuração Do Crédito ICMS Presumido
</div>

Obrigado antecipadamente.

Rodrigo

8 Respostas

tucano 17 de jun. de 2011

opa!

vc precisa configurar um datatype na chamada ajax
e fazer a função do sucesso esperar o "data"
exemplo:

$.ajax({  
            type: "GET",  
            datatype: 'json',
            url: "<c:url value="/teste/testehtml"/>", 
            sucess: function(data) {  
...

desta forma a chamada ajax (com datatype configurado e a função do sucesso esperando um “data”) vai conseguir processar o retorno da chamada

exemplificando a questão…
… o “conteudo” é a variavel que vai conter a informação que vc quer imprimir

sucess: function(data) {  
   $("#apuracao").html(data.conteudo);
}

dá uma testada nessa ideia,
aconselho em primeiro momento tentar imprimir apenas um valor que vem do controller…
… depois testa a questão de implementar a parte de códigos vindo do controller
… enfocar primeiramente na comunicação, depois ver a forma pra deixar “bonitinho”

qualquer coisa solta o grito aew rapaz!
t+

Lucas_Emanuel 17 de jun. de 2011

Eu acho que seria melhor voce separar os conteudos dessas DIVs em página separada, e chamar essa página com jQuery:

$("sua-div").load("página.html");

Rfuhr 17 de jun. de 2011

Lucas Emanuel:
Eu acho que seria melhor voce separar os conteudos dessas DIVs em página separada, e chamar essa página com jQuery:
$("sua-div").load("página.html");

Lucas, o problema é que esta pagina é dinamica. devo montar ela conforme parametros em meu banco de dados. então pensei em utilizar ajax, e um metodo via raptor. tentei usar no controller..

result.use(Results.http()).body("<div>Teste</div>")

e no jsp. não conseguir fazer ler este retorno.

Lucas_Emanuel 17 de jun. de 2011

Rfuhr:
Lucas Emanuel:
Eu acho que seria melhor voce separar os conteudos dessas DIVs em página separada, e chamar essa página com jQuery:
$("sua-div").load("página.html");
Lucas, o problema é que esta pagina é dinamica. devo montar ela conforme parametros em meu banco de dados. então pensei em utilizar ajax, e um metodo via raptor. tentei usar no controller..
result.use(Results.http()).body("<div>Teste</div>")
e no jsp. não conseguir fazer ler este retorno.

Voce pode fazer templating nesta página que esta sendo carregada no load de uma forma dinâmica, conforme os dados que são carregado do banco via ajax. A verdade é que escrever html dentro de string é meio arcaico.

Lucas_Cavalcanti 17 de jun. de 2011

success: function(data) {  
        data aqui é o que a requisição retornou, pode usar do jeito que quiser.

nesse caso vc não precisa necessariamente retornar HTML do lado do servidor, vc pode redirecionar pra jsp mesmo, pois também estará disponível no ajax

só cuidado que o nome da propriedade é success (vc tinha colocado sucess)

Rfuhr 17 de jun. de 2011

Lucas Cavalcanti:
success: function(data) {  
        data aqui é o que a requisição retornou, pode usar do jeito que quiser.
nesse caso vc não precisa necessariamente retornar HTML do lado do servidor, vc pode redirecionar pra jsp mesmo, pois também estará disponível no ajax

só cuidado que o nome da propriedade é success (vc tinha colocado sucess)

Consegui. fiz uma alteração no controller tb..

@Get @Path("/teste.html")
    public void testehtml() {
		String html = "<h3><a href=\"#\">A) CRÉDITO PRESUMIDO</a></h3>" + 
		"<div>Valores</div>" + "<h3><a href=\"#\">DEMONSTRATIVO BASE PARA CRÉDITOS PROPORCIONAIS</a></h3>";
		result.use(http()).body(html);
	}

e no jsp

$.ajax({  
            type: "GET",  
            dataType:"html",
            //url: "<c:url value="/testehtml"/>",
            url: "teste.html",
            success: function(data) {
                  
                                //esta parde de append deve vir do metodo do controller. Logico que será apenas uma linha, com o retorno do metodo.   
                $("#apuracao").append(data);
                
  
                                //como faço para colocar pegar e colocar o retorno do metodo testehtml
                $( "#apuracao" ).accordion({  
                    collapsible: false  
                });  
                                
            }
        });

Na hora de montar o

<h3><a href=\"#\">A) CRÉDITO PRESUMIDO</a></h3>

ele retorna para o html criado no controller CR�DITO PRESUMIDO. ou seja.. e não CRÉDITO PRESUMIDO coloquei no web.xml

<context-param> 
<param-name>br.com.caelum.vraptor.encoding</param-name> 
<param-value>UTF-8</param-value> 
 </context-param>

Obrigado pela ajuda, e parabens pelo otimo VRaptor

Lucas_Cavalcanti 17 de jun. de 2011

dica:

isso:

$.ajax({    
    type: "GET",    
    dataType:"html",  
    //url: "<c:url value="/testehtml"/>",  
    url: "teste.html",  
    success: function(data) {  
            
                        //esta parde de append deve vir do metodo do controller. Logico que será apenas uma linha, com o retorno do metodo.     
        $("#apuracao").append(data);  
          
  
                        //como faço para colocar pegar e colocar o retorno do metodo testehtml  
        $( "#apuracao" ).accordion({    
            collapsible: false    
        });    
                          
    }  
});

é a mesma coisa que isso:

$("#apuracao").load("teste.html", function() {
       $( "#apuracao" ).accordion({    
            collapsible: false    
       });  
});

Rfuhr 17 de jun. de 2011

Lucas Cavalcanti:

dica:

isso:

$.ajax({    
    type: "GET",    
    dataType:"html",  
    //url: "<c:url value="/testehtml"/>",  
    url: "teste.html",  
    success: function(data) {  
            
                        //esta parde de append deve vir do metodo do controller. Logico que será apenas uma linha, com o retorno do metodo.     
        $("#apuracao").append(data);  
          
  
                        //como faço para colocar pegar e colocar o retorno do metodo testehtml  
        $( "#apuracao" ).accordion({    
            collapsible: false    
        });    
                          
    }  
});

é a mesma coisa que isso:

$("#apuracao").load("teste.html", function() { $( "#apuracao" ).accordion({ collapsible: false }); });

Lucas, a melhor para montar o html… seria via concatenação de strings… eu criando minhas classes e metodos para gerar. ou teria algo mais usual. digamos assim, pronto para isto. Lembro de ter visto algo de VRaptor + Html.

E desculpe a incomodação.

Valeu

Criado 17 de junho de 2011

Ultima resposta 17 de jun. de 2011

Respostas 8

Participantes 4

8 Respostas

Topicos relacionados