[RESOLVIDO] Atualizar JSP AJAX + JQUERY

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">&times;</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.