Vraptor + redirect ajax

Assuntos Gerais
#1

Olá pessoal,
tenho a seguinte situação:

Tenho uma lógica que é chamada via ajax em uma div específica do meu layout, gostaria de saber se tem como eu redirecionar a resposta dessa logica para esse mesmo div???

#2

Tem sim,

se você estiver usando jquery, por exemplo:

function chamaAjax() {
    $.ajax( {
         url: 'minhalogica',
         data: {parametro: 'valor'},
         success: function(data) {
                 $('#id_da_div').html(data);
         }
     });

}

[]'s

#3

@lucascs em primeiro lugar, obrigado pela ajuda!!!

eu sou meio novato nessa área de programação para web, li a apostila da caelum sobre vraptor Fj-28, mas ainda encontro dificuldades em algumas aplicações!!!

neste caso por exemplo, eu tenho um jsp divido em várias div’s, em uma delas eu abro a logic: cidade.formulario.ok eu gostaria que após a execução dessa logic, a logic cidade.loadAll.logic fosse chamada na mesma div!!! vou postar os códigos para uma visualização mais precisa da minha dúvida:

script que carrega a logic cidade.formulario.ok na div específica:

function carregaTelaCentro(logic) {
	var url  = '' + logic;
	var pars = '';

	var myAjax = new Ajax.Request(url,
		{
		method: 'get',
		parameters: pars,
		onComplete: responseTelaCentro
		}
	);      
}

function responseTelaCentro(data) {
	var div = document.getElementById("centro");
	var html = "";
	html += data.responseText;
	div.innerHTML = html;
}

views.propertie

cidade.insert.ok = cidade.loadAll.logic

o que não estou conseguindo entender onde implemento o redirecionamento para que após a execução da logic cidade.formulario.ok, seja chamada a logic cidade.loadAll.logic dentro da mesma div que estava a logic cidade.formulario.ok

novamente muito obrigado pela sua ajuda!!!

#4

acho que o que você quer fazer dá pra ser assim, dentro do formulario.ok.jsp:

<body onload="carregaTelaCentro()">
   ... sua página aqui
</body>

[]'s

#5

olá @lucascs,
tentei as duas alternativas que você me passou e mesmo assim meu problema persiste!!!

você teria mais alguma idéia ???

o vraptor sempre abre a logica em uma nova página e não em uma div específica!!!

será que se você visse o sistema ajudaria ???

[]'s

#6

Se você tá chamando via ajax mesmo, não tem muita importância o que o vraptor devolver de resposta…

mas de qqer forma, tenta colocar @Remotable na lógica que você tá chamando via ajax pra ver se funciona…

mas tenta usar o jquery, que é mais fácil:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=

e é aquele código que eu falei:

$.ajax({
   url: 'minha.logica.logic',
   data: {parametro1: 'valor', parametro2: 'valor'},
   success: function(data) {
       $('#id_da_div').html(data);
   }
}
#7

cara, como sou meio novato no mundo web, posso estar deixando passar algo…vou postar todos os codigos para ver se falta algo ou verficar o que estou fazendo de errado!!!
o que eu gostaria é o seguinte:
quando clicar no menu cad.cidade, ele abrir a logica: cidade.formulario.ok na div centro >>> isso eu consegui fazer
porém quando clico no botão que tem na formulario.ok.jsp, gostaria que ao invés do vraptor chamar uma página nova com a logica: cidade.loadAll.logic, esta logica fosse carregada na div centro!!!

não sei se consegui me fazer entender!!!

segue abaixo os código…

essa é a pagina principal do meu sistema

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>..:: SISTEMA ::..</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script/jquery-1.3.2.js"></script>
<script type="text/javascript" src="script/funcoes.js"></script>
</head>
<body>
<div id="wrapper">
  <div id="logo">
    <h1><img src="imagens/logo.gif" alt="" width="200" height="61"/></h1>
    <p>&nbsp;</p>
  </div>
  <p>&nbsp;</p>
  <div id="search">
    <form method="get" action="">
      <fieldset>
        <legend>Quick Search</legend>
        <input id="s" type="text" name="s" value="" />
        <input id="x" type="submit" value="Search" />
      </fieldset>
    </form>
  </div>
  <p>&nbsp;</p>
  <div id="menu">
    <ul>
      <li><a href="javascript:chamaAjax('cidade.loadAll.logic');">Cad. Cidade</a></li>
    </ul>
  </div>
  <div id="page">
    <div id="bgtop">
    </div>
    <div id="bgbottom">
      <div id="sidebar2" class="sidebar">
      </div>
      <div id="centro">
        <div class="post">
        </div>
      </div>
      <div style="clear: both;">
        &nbsp;
      </div>
    </div>
  </div>
  <hr />
</div>
</body>
</html>

essa é o funcoes.js

function chamaAjax(logica) {  
	$.ajax( {  
		url: logica,  
		data: {},  
		success: function(data) {  
			$('#centro').html(data);
		}  
	});  
}

cidade.loadAll.ok.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="script/funcoes.js"></script>
<title>Lista de Cidades</title>
</head>
<body>
<h1>Cidades</h1>
<h3>
<a href=javascript:chamaAjax('cidade.formulario.logic');>Nova Cidade</a>

  <display:table id="cidade" name="${cidades}" requestURI="cidade.loadPage.logic" class="displaytag" 
                 sort="list" defaultsort="1" pagesize="10" excludedParams="ajax" >    
    <display:column property="id" sortable="true" sortProperty="id"/>
    <display:column property="descricao" sortable="true" sortProperty="descricao"/>
  </display:table>
</body>
</html>

cidade.formulario.ok.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<title>Cadastro de Cidades</title>
</head>
<body>
<h1>Nova Cidade</h1>
<form action="cidade.insert.logic" method="get" accept-charset="iso-8859-1">
  Descrição: <input type="text" name="cidade.descricao""/><br/>
  <input type="submit" title="confirmar"/>
</form>
</body>
</html>

views.properties

cidade.insert.ok = cidade.loadAll.logic

e por último minha classe cidade.logic.java

@Component
@InterceptedBy({LoginInterceptor.class, DaoInterceptor.class})
public class CidadeLogic {
	
	private final DaoFactory daoFactory;
	private final VisaoTILogic logic;
	
	@Parameter
	@Out
	private CidadeBean cidade = new CidadeBean();
	
	@Parameter
	private List<CidadeBean> cidades;
	
	public CidadeLogic(DaoFactory daoFactory) {
		this.daoFactory = daoFactory;
		logic = new VisaoTILogic(daoFactory, CidadeBean.class);
	}
	
	@Remotable
	public void insert() {
		cidade.setEstado((String) Estado.Parana.getTextValue());
		logic.insert(cidade);
	}

	@Remotable
	public void loadAll() {
		cidades = logic.loadAll();
		
		this.firstPage = page == 0;
		this.lastPage = cidades.size() < pageSize;
	}
	

	public void formulario() {
	}

	public List<CidadeBean> getCidades() {
		return cidades;
	}
	
	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public boolean isLastPage() {
		return lastPage;
	}

	public void setLastPage(boolean lastPage) {
		this.lastPage = lastPage;
	}
}
#8

Você tem várias opções, entre elas:

  • trocar o div por um iframe, daí as submissões de forms sempre caem dentro do iframe
  • usar o JQuery ajax form plugin: http://malsup.com/jquery/form/
    ficaria algo como:
   function chamaAjax(logica) {    
       $.ajax( {    
           url: logica,    
           data: {},    
           success: function(data) {    
               $('#centro').html(data);  
               $('#id_do_form_da_nova_pagina').ajaxForm({ target: '#centro' });
           }    
       });    
   }
#9

cara valeu mesmo!!!

Deu certo… muito obrigado!!!

ps.: usei o JQuery ajax form plugin

#10