Pessoal, gostaria de saber da possibilidade de atualizar minha JSP com uma lista retornada do banco após uma busca.
Quero fazer uma busca e retornar para minha própria jsp sem precisar dar redirect.
Segue meu controller:
@RequestMapping("/buscaDeAcessosDoGrupo")
public ModelAndView buscaDeAcessosDoGrupo(HttpServletRequest request) throws SQLException{
int idGrupo = Integer.parseInt(request.getParameter("botaoEditarGrupo"));
List<Role> roles = roleDAO.buscarAcessosDoGrupo(idGrupo);
ModelAndView model = new ModelAndView("controle/grupos");
model.addObject("roles", roles);
return model;
}
Nesse caso gostaria de enviar apenas a lista e usar EL para alimentar a tabela.
Esse controller é chamado através de um botão que fica em uma tabela, e ao clicar no botão abre um modal com uma tabela que deve ser preenchida através dessa lista.
1 curtida
Eu também pesquiso isso a muito tempo, a unica forma que achei até hoje sem ter que re-chamar a pagina (ou etc…), é usando um iframe, chamando o controller por ele através de um redirecionamento simples usando o minimo de js.
E como você fez isso?
Tem como passar um exemplo simples apenas para que eu tenha uma noção.
Valeu amigo…
Qual o problema em usar ajax + jquery?
Problema nenhum.
Inevitavelmente vou ter que usar jquery. Porém meu caso é o seguinte a jsp que eu quero atualizar através do controlador é uma jsp que só tem uma tabela. E na minha jsp principal eu coloco ela dentro de uma div usando includ e eu só quero usar jquery apenas pra atualizar essa div com a tabela. A ideia é atualizar a div quando ele clicar no botão editar, acionar o controller fazendo a busca no banco, atualizando minha jsp com o retorno e por último da um refresh apenas na div da minha página principal.
A questão é que, atualmente, iframe é um anti pattern, praticamente descontinuado há muito tempo em qualquer projeto sério.
O javascript, consequentemente, o script jquery funcionará normalmente para uma página incluída em outra jsp, bem como CSS e outros.
1 curtida
Sim, funciona.
Quando abro a minha jsp pela primeira vez monta tudo lindo. Meu problema está nessa atualização que quero fazer quando quero editar. Pqe do jeito que está não consigo enviar a lista pra jsp sem ter que direcionar.
E também não quero montar a tbody em uma function pqe tem uma funcionalidade que acabo perdendo por conta disso.
Sim, se você não fizer isso via ajax, nem usando o infame iframe, deve atualizar a página
Então o caso é chamar mesmo pelo Ajax retornando do controller uma lista e montar a tbody com essa lista?
Mas não precisa.
Pode usar um plugin para tabela, como o datatables ou mesmo dar uma olhada no slickgrid
1 curtida
Beleza vou dar uma olhada nisso, valeu.
Para mostrar como acabei fazendo o que eu estava querendo:
Meu método no Controller:
@RequestMapping("/buscaDeAcessosDoGrupo")
public String buscaDeAcessosDoGrupo(@RequestParam(value = "idGrupo") String idGrupo, HttpServletRequest request) throws SQLException{
List<Role> roles = roleDAO.buscarAcessosDoGrupo(Integer.parseInt(idGrupo));
request.setAttribute("roles", roles);
return "controle/tabela-lista-acessos";
}
Meu Script:
function buscaDeGrupoPorID(idGrupo){
jQuery.ajax({
type: 'POST',
url: 'buscaDeAcessosDoGrupo',
data: {
idGrupo: idGrupo
},
success: function(data){
$("#tabelaDosAcessos").html(data);
}
});
}
Minha JSP Principal:
<form:form method="POST">
<div class="container">
<table id="tabelaAllGrups" class="borda-na-tabela">
<thead class="corHeaderGrupo">
<tr>
<th class="alinha-cor">ID Grupo</th>
<th class="alinha-cor">Sistema</th>
<th class="alinha-cor">Nome do Grupo</th>
<th class="alinha-cor">Ações</th>
</tr>
</thead>
<tbody class="gruposSistema">
<tr>
<spring:forEach items="${perfis}" var="perfis">
<tr>
<td class="idGrupo">${perfis.id}</td>
<td class="nmPlugin">${perfis.plugin}</td>
<td class="nmGrupo">${perfis.nome}</td>
<td>
<button type="button" class="btn btn-primary" id="botaoAddUser" onclick="usuariosDoGrupo(${perfis.id})" data-toggle="modal" data-target="#myModalUser">
<span><i class="fas fa-user-plus"></i></span>
</button>
<button type="button" id="botaoEditarGrupo" value="${perfis.id}" name="botaoEditarGrupo" onclick="buscaDeGrupoPorID(${perfis.id})" class="btn btn-warning" data-toggle="modal" data-target="#myModal">
<span><i class="fas fa-pencil-alt"></i></span>
</button>
<button type="button" id="botaoExcluirGrupo" class="btn btn-danger" data-toggle="modal" data-target="#myModalExcluirGrupo">
<span><i class="fas fa-trash-alt"></i></span>
</button>
</td>
</tr>
</spring:forEach>
</tr>
</tbody>
</table>
</div>
</form:form>
Modal que chamo ao clicar no Botão Editar:
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Cadastro de Grupo</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="divCaixa">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="form-group">
<label for="idPerfil">Código:</label>
<input type="input" class="form-control" id="idPerfil" name="idPerfil" disabled>
</div>
</div>
<div class="col-sm-3 col-md-10">
<label for="pwd">Sistema:</label>
<input type="input" class="form-control" id="nmSistema" placeholder="Nome Sistema" name="nmSistema">
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-12">
<label for="pwd">Nome do Grupo:</label>
<input type="input" class="form-control" id="nmGrupo" placeholder="Nome do Grupo" name="nmGrupo">
</div>
</div>
</div>
<br>
<div id="tabelaDosAcessos">
<jsp:include page="tabela-lista-acessos.jsp"></jsp:include>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-outline-success" data-dismiss="modal">Salvar</button>
<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Minha JSP com a tabela que preencho através do meu Controller:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="spring" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<table id="tabelaDeAcessos" class="borda-na-tabela">
<thead class="corHeaderGrupo">
<tr>
<th class="alinha-cor">Permissão</th>
<th class="alinha-cor">Descrição</th>
<th class="alinha-cor">Acesso</th>
</tr>
</thead>
<tbody id="tabelaAcessos">
<tr>
<spring:forEach items="${roles}" var="role">
<tr>
<td>${role.nome}</td>
<td>${role.descricao}</td>
<td>
<spring:choose>
<spring:when test="${role.temAcesso}">
<button type="button" id="botaoAtribuirAcesso" class="btn btn-success" onclick="atribuirAcesso(this);" value="temAcesso">
<i class="fas fa-check"></i>
</button>
</spring:when>
<spring:otherwise>
<button type="button" id="botaoAtribuirAcesso" class="btn btn-secondary" onclick="atribuirAcesso(this);" value="semAcesso">
<i class="fas fa-check"></i>
</button>
</spring:otherwise>
</spring:choose>
</td>
</tr>
</spring:forEach>
</tr>
</tbody>
</table>
Para contextualizar, tenho uma pagina principal onde possuo uma tabela que tem todos os grupos que acessam o sistema.
Nessa tabela possuo alguns botões para serem tomadas as ações de Adicionar Usuário no Grupo, Editar o Grupo e Excluir o Grupo.
Na ação de Editar Grupo meu objetivo era abrir um modal onde montra as info do grupo e uma tabela mostrando quais acessos o grupo não possui e os que possui, e com isso pode ser dado acesso ou retira-lo.
Meu objetivo era alimentar a tabela de uma forma mais dinâmica evitando utilização de muito código html no JavaScript.
Creio eu que dessa forma alcancei meu objetivo.
1 curtida
Entendi.
Não tem muito jeito não, a não ser que você use algo como o angular, que já flexibiliza isso tudo de forma mais dinâmica e menos verbosa.