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!!
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?
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.
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?
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'].valueem todo caso, prefira usar fora do href… fica mais simples