[RESOLVIDO] JSP + JavaScript = Campo duplicado

Front-end
#1

Boa tarde pessoal,

Queria ver se alguém poderia me dar uma ajuda. Estou com o seguinte problema: tenho duas telas, na primeira tenho um menu lateral em uma div e o corpo da tela em outra div, na segunda tela eu altero somente a parte da segunda div. O problema é que isto está alterando o css e os campos da div que contém o menu lateral. Já descobri que o problema é quando faço os imports do JavaScript e do CSS quando chamo a segunda tela. Por acerto e erro descobri que se não importar o CSS após a chamada do ajax não há problema, só que se deixar de importar o JavaScript os componentes da segunda tela não carregam (é que estou usando aquelas frescuras do jquery ui também).

Grato a quem puder ajudar.

#2

Boa noite pessoal,

Vou deixar aqui os códigos com problema e explicar melhor para ver se alguém consegue me dar uma luz.

Primeiro tenho este fragmento, uma div que contém a identificação de um usuário:

<%@ 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"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


<div class="menu-lateral-esquerdo fonte-100">
	<h2 id="bem-vindo"><fmt:message key="id.bem_vindo" /></h2>
	 ${usuarioLogado.login} 
	<br><a href="#"><fmt:message key="id.cadastro"/></a> <a href="loggof"><fmt:message key="id.sair" /></a>
	<h3 id="perfil">
		<b><fmt:message key="id.perfil" /></b>
	</h3>
	<select id="menuIdUsuario">
		<option value="0"><fmt:message key="id.analista" /></option>
		<option value="1"><fmt:message key="id.desenvolvedor" /></option>
		<option value = "2" selected="true"><fmt:message key="id.usuario" /></option>
	</select>

</div>

Depois tenho esta página, onde são apresentadas informações sobre grupos de usuários:

<%@ 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"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">



<title><fmt:message key="frmgrupos.titulo" /></title>

<!-- Importação dos css -->
<c:import url="/WEB-INF/jsp/divs/cabecalhos.jsp" />

</head>

<body>

	<c:import url="/WEB-INF/jsp/divs/banner_cima.jsp" />

	<div id="menu" class="menu-lateral">
		<div>
			<c:import url="/WEB-INF/jsp/divs/id.jsp" />
		</div>
		<div>
			<c:import url="/WEB-INF/jsp/divs/MenuPermissoes.jsp" />
		</div>
	</div>
	
	<div id="tela_grupo" class="tela">
		<!-- 	barra de navegação -->
		<div id="navegacao" class="navegacao fonte-100">
			<a href="MenuPrincipal" ><fmt:message key="principal.navegacao" /> </a> -> <fmt:message key="frmgrupos.consulta_grupo" />
		</div>
		
		<!-- 	título -->
		<div>
			<h1>
				<fmt:message key="frmgrupos.titulo" />
			</h1>
		</div>
		<div>
			<table id="tb_grupos" class="tabela fonte-100">
				<thead>
					<td><fmt:message key="grupo.tabela_grupo" /></td>
					<td><fmt:message key="grupo.tabela_permissoes" /></td>
					<td><fmt:message key="grupo.tabela_observacoes" /></td>
				</thead>
				<c:forEach items="${colGrupos}" var="grupo">
					<tr>
						<td>${grupo.nome}</td>
						<td>
						<c:forEach items = "${grupo.regras}" var="regra">
							${regra.nome} 
						</c:forEach>
						</td>
						<td>${grupo.observacoes}</td>
					</tr>
				</c:forEach>				
				
			</table>
			<div id="frmGrupos_botoes">
				<button id="bNovoGrupo" onclick="redirecionaFrmGrupos_novo()"><fmt:message key="grupo.botao_novo" /></button>
				<button id="bEditarGrupo" onclick="redirecionaFrmGrupos_editar()"><fmt:message key="grupo.botao_editar" /></button>
			</div>
		</div>
	
				
	</div>
	
	

</body>
	<!-- JS - JavaScript -->

			<c:import url="/WEB-INF/jsp/divs/rodape.jsp" />
</html>

Dentro desta página, quando clica-se no botão novo, eu chamo esta função:

function redirecionaFrmGrupos_novo() {
	$.ajax({
		type:"POST",
		url:"NovoGrupo",
		data:"result=novo",
		success:function(data){
			$("#tela_grupo").html(data);
		}
	});
}

Este comando chama está página:

<%@ 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"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!-- Importação dos css -->
<c:import url="/WEB-INF/jsp/divs/cabecalhos.jsp" />

<div>
	<!-- 	barra de navegação -->
		<div id="navegacao" class="navegacao fonte-100">
			<a href="MenuPrincipal" ><fmt:message key="principal.navegacao" /> </a> -> <a href="gerGrupos" ><fmt:message key="frmgrupos.consulta_grupo" /></a> -> <fmt:message key="frmgrupo_editar.barra_navegacao" /> 
		</div>		
		<!-- 	título -->
		<div>
			<h1>
				<fmt:message key="frmgrupo_editar.titulo" />
			</h1>
		</div>
		<div>
		<form method="POST" action="SalvarGrupo">
			<fieldset >
				<legend class="fonte-120"><b><fmt:message key="frmgrupo_editar.titulo_formulario" /></b></legend>
				
			<label for="grupo.nome" class="fonte-100"><fmt:message key="frmgrupo_editar.nome" /> </label>
			<input type="text" id="grupo.nome" name="grupo.nome"/><br/>
			<label for="grupo.observacoes"  class="fonte-100"><fmt:message key="frmgrupo_editar.observacoes" /></label><br/>
			<textarea rows = "5" cols="50" id="grupo.observacoes" name="grupo.observacoes"/></br>
<!-- 			<div style="position:relative;"> -->
			<label for="regras"  class="fonte-100"><fmt:message key="frmgrupo_editar.permissoes" /></label>
			
			<select id="cbRegras" class="fonte-80">
				<c:forEach items="${regras}" var="reg">
							<option value="${reg.codigo}">${reg.nome }</option>					
				</c:forEach>
			</select>
<!-- 			</div> -->
			<button name="bAddPermissao" id="bAddPermissao" onclick = "addPermissao()" class="fonte-80" type="button">+</button>
			<button name="bRemovePermissao" id="bRemovePermissao" onclick = "removePermissao()" class="fonte-80" type="button">-</button>
			<br/>
			<table id="tbGrupoPermissoes">
			<thead>
				<tr>
					<td><fmt:message key="frmgrupo_editar.tbl_permissao_grupo" /></td>
				</tr>
			</thead>
				<c:forEach items="${grupo.regras}" var="reg" varStatus="status">
					<tr id="grupo.regras[${status.index} }]"><td>${status.index} - ${reg.nome}</td></tr>
				</c:forEach>
			</table>
			
			</fieldset>
			<div id="frmGrupos_botoes">
				<button id="bSalvarGrupo" type="submit"><fmt:message key="frmgrupo_editar.salvar" /></button>
				<button id="bEditarGrupo" type="button" onclick="redirecionaGrupos()"><fmt:message key="frmgrupo_editar.cancelar" /></button>
			</div>
						
		</form>
<!-- 				Esta parte é que dá problema -->
<!-- 				JS - JavaScript -->
 			<c:import url="/WEB-INF/jsp/divs/rodape.jsp" /> 
		
		</div>




		</div>

A página carrega normalmente quando se executa a função com ajax. O problema está no primeiro fragmento, ele tem um select (“menuIdUsuario”) que aparece duas vezes na tela. O que já percebi é que se retirar a declaração do JavaScript da última tela o problema da repetição do select desaparece, só que os botões e campos formatados com o JQuery também desaparecem, ficam só padrão HTML. Como não tenho nenhuma experiência no desenvolvimento de sistemas WEB realmente estou perdido, pois a forma de desenvolvimento é bem diferente da forma para desktop.

Agradeço a quem possa ajudar, inté…

#3

Boa noite pessoal

Descobri o problema. Estava na hora que eu declarava os arquivos do JavaScript, eu estava fazendo referencia as bibliotecas do JQuery na página principal e também na div que eu carregava via ajax, por isso que o componente do menu duplicava. Foi só tirar as referências do JQuery, deixando somente o arquivo do JS que eu uso, que o problema foi resolvido

#4