Olá a todos.
Estou estudando o Vraptor 3 e estou gostando, no entanto como em todo aprendizado surgem algumas dificuldades.
Estou querendo implementar uma funcionalidade muito comum em sistemas web atualmente o list of values(LOV),onde tenho um texfield com umm botão ,entçao o usuario clica no botão e aparece uma janela com uns campos de busca e uma lista para então selecionar algo nesta lista, 9isso com ZK é moleza, com Vraptor sei que vou ter que manipular javascript,jquery… o problema é que não manjo muto de js nem de jquery, gostaria de contar com a ajuda dos amigos para implementar esta funcionalidade, seja indiocando algum tutorial pronto ou então ditando os caminhos das pedras… agradecido!!
VRaptor + List of Values
R
6 Respostas
Legal cara!
Isso aí dá um pouco de trabalho, mas dá para aprender bastante coisas!
Primeiro, dê uma olhada em datatables.net para ver como fazer tabelas com filtros e tabelas que carregam com ajax de forma mais fácil e rápida.
Qualquer dúvida sobre datatables pode postar que eu tento te ajudar.
Depois, dê uma olhada no jQuery UI e como fazer modal (o dataTables se integra com o jQuery UI…)
Eu sugiro você dar uma olhada em como mexer nesses dois primeiro. Ai a gente vai implementando o restante, que tal?
R
Legal Rafael, vou dar uma estudada sim e tentar implementar algo, depois posto o resultado aqui e se eu não consegui agente vai implementando e após conseguirmos posso até fazer um tutorial sobre esta funcionalidade pois acredito que tem bastante gente por ai querendo implementar coisas do tipo.Abração.
R
Ola Rafael boa noite,
esta ainda não é a maneira que realmente quero implementar,quero fazer tudo ajax, mas devido a falta de tempo testei fazer isso aqui com um javascript simples
página de edição
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="/template/cabecalho.jsp" />
<h1>Cadastro de Filme</h1>
<script type="text/javascript">
var i=0;
function abrirJanela(url, larg, altu, esq, topo){
if (i==0){
janela=window.open(url, 'janela', 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,height=' + altu + ',width=' + larg + ',top=' + topo + ',left=' + esq);
i=1;
}
else {
janela.close();
i=0;
abrirJanela(url, larg, altu, esq, topo);
}
}
</script>
<form name="formEditaFilme" action="/locadora/filme/altera" method="post"><input
type="hidden" name="filme.id" value="${filme.id}" />
<table>
<tr>
<td>Nome</td>
<td><input type="text" name="filme.nome" value="${filme.nome}" />
</td>
</tr><!--
<tr>
<td>Categoria</td>
<td><select id="categorias" name="filme.categoria.id">
<option value="${filme.categoria.id}">${filme.categoria.nome}</option>
<c:forEach var="categoria" items="${listaCategorias }">
<option value="${categoria.id }">${categoria.nome }</option>
</c:forEach>
</select></td>
</tr>
--><tr>
<td>Categoria</td>
<td>
<input name="filme.categoria.id" type="hidden" value="${filme.categoria.id}" size="4" maxlength="4" readonly />
<input name="categoriaNome" type="text" readonly="readonly" name="filme.categoria.nome" value="${filme.categoria.nome}"/>
<a href="javascript:abrirJanela('<c:url value="/categoria/lista"/>', 600, 400, (screen.width - 600)/2, 100);">
<img src="<c:url value="/img/bt.gif"/>" width="23" height="22" border="0" align="absmiddle" /></a>
</td>
</tr>
<tr>
<td>Gênero</td>
<td><input type="text" name="filme.genero"
value="${filme.genero}" /></td>
</tr>
<tr>
<td>Ano</td>
<td><input type="text" name="filme.ano" value="${filme.ano}" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="Alterar" /> <input type="submit" value="Imprimir Ficha"
name="imprime"
onclick="this.form.action='/locadora/filme/imprime';this.form.submit();" />
</td>
</tr>
</table>
</form>
<jsp:include page="/template/rodape.jsp" />
página de busca
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr bgcolor="black" style="color:white; ">
<td>Id</td>
<td>Nome</td>
</tr>
<c:forEach items="${lista}" var="categoria">
<tr>
<td>${categoria.id}</td>
<td><a href="javascript:window.opener.document.formEditaFilme.filme.categoria.id.value=${categoria.id};
window.opener.document.formEditaFilme.categoriaNome.value='${categoria.nome}';
window.close();" >${categoria.nome}</a></td>
</tr>
</c:forEach>
</table>
tá quase tudo funcionando perfeito mas quando eu tento fazer isso
dá um erro de javascript: formEditaFilme.filme is undefined e ai eu não consigo popular o id da categoria no campo hidden,se eu mudar o name do input hidden funciona,mas ai não consigo setar a categoria do filme e a categoria vai null para o banco.Alguem sabe como contornar ou solucionar este problema? alguma ídeia?
R
Consegui fazer funcionar
página de edição:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="/template/cabecalho.jsp" />
<h1>Cadastro de Filme</h1>
<script type="text/javascript">
var i=0;
function abrirJanela(url, larg, altu, esq, topo){
if (i==0){
janela=window.open(url, 'janela', 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,height=' + altu + ',width=' + larg + ',top=' + topo + ',left=' + esq);
i=1;
}
else {
janela.close();
i=0;
abrirJanela(url, larg, altu, esq, topo);
}
}
</script>
<form name="formEditaFilme" action="/locadora/filme/altera" method="post"><input
type="hidden" name="filme.id" value="${filme.id}" />
<table>
<tr>
<td>Nome</td>
<td><input type="text" name="filme.nome" value="${filme.nome}" />
</td>
</tr><!--
<tr>
<td>Categoria</td>
<td><select id="categorias" name="filme.categoria.id">
<option value="${filme.categoria.id}">${filme.categoria.nome}</option>
<c:forEach var="categoria" items="${listaCategorias }">
<option value="${categoria.id }">${categoria.nome }</option>
</c:forEach>
</select></td>
</tr>
--><tr>
<td>Categoria</td>
<td>
<input id="catid" name="filme.categoria.id" type="hidden" value="${filme.categoria.id}" size="4" maxlength="4" readonly />
<input name="categoriaNome" id="catnom" type="text" readonly="readonly" name="filme.categoria.nome" value="${filme.categoria.nome}"/>
<a href="javascript:abrirJanela('<c:url value="/categoria/lista"/>', 600, 400, (screen.width - 600)/2, 100);">
<img src="<c:url value="/img/bt.gif"/>" width="23" height="22" border="0" align="absmiddle" /></a>
</td>
</tr>
<tr>
<td>Gênero</td>
<td><input type="text" name="filme.genero"
value="${filme.genero}" /></td>
</tr>
<tr>
<td>Ano</td>
<td><input type="text" name="filme.ano" value="${filme.ano}" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="Alterar" /> <input type="submit" value="Imprimir Ficha"
name="imprime"
onclick="this.form.action='/locadora/filme/imprime';this.form.submit();" />
</td>
</tr>
</table>
</form>
<jsp:include page="/template/rodape.jsp" />
Página de busca
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script>
function funcao1(id,jur_nome) {
var txt1 = window.opener.document.getElementById('catid');
txt1.value = id;
var txt2 = window.opener.document.getElementById('catnom');
txt2.value = jur_nome;
//window.opener.location.href='ProcurarJurisdicionado2.alterarJurisdicionado/' + id;
window.close();
// txt2.focus();
return true;
}
</script>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr bgcolor="black" style="color: white;">
<td>Id</td>
<td>Nome</td>
</tr>
<c:forEach items="${lista}" var="categoria">
<tr>
<td>
<!-- abordagem funcionando -->
<a href="#" id="linkAncora"
onclick="javascript:return funcao1(${categoria.id},
'${categoria.nome}')">${categoria.id}</a></td>
<td>
<!-- abordagem não funcionando -->
<a href="javascript:window.opener.document.formEditaFilme.filme.categoria.id.value=${categoria.id};
window.opener.document.formEditaFilme.categoriaNome.value='${categoria.nome}';
window.close();">${categoria.nome}</a></td>
</tr>
</c:forEach>
</table>
a parada rola normalmente quando clico no link1 ,já no link 2 ele dá erro de referencia pois não consegue referenciar o meu input hidden que tem o name “filme.categoria.id” deve ser por causadesses “.”,mas tudo bem se alguem precisar de algo do tipo é só usar o dexscrito no link 1 que vai funcionar perfeitamente.
vc não pode acessar desse jeito qdo tem o ponto…
faça assim:
window.opener.document.formEditaFilme['filme.categoria.id'].value
em todo caso, prefira usar fora do href… fica mais simples
Criado 21 de dezembro de 2012
Ultima resposta 6 de jan. de 2013
Respostas 6
Participantes 3