Caros, estou a me complicar com a atualização de minha página via ajax com o retorno do servidor.
Já busquei no forum e google mas não encontrei sobre atualizar a div em outra página.
Estou até na dúvida se essa é a maneira mais indicada para o que estou tentando fazer.
Explico…
Tenho a página principal.jsp onde há uma nav com vários links que utilizo para abrir outras páginas dentro de uma div com id=“conteudo”.
Meu problema esta na hora que faço o submit da pagina equipamentos.jsp que esta dentro da div id=“conteudo”, preciso que o retorno atualize a div id=“conteudo” que esta na página principal.jsp.
Tentei atualizar a div principal da minha página equipamentos.jsp mas ele começa a duplicar, triplicar o conteúdo.
Segue meus códigos, agradeço qualquer luz que possam me dar.
principal.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Reef Control - Bem Vindo!</title>
<link rel="stylesheet" type="text/css" href="resources/bibliotecas/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/bibliotecas/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/sb-admin.min.css">
</head>
<body class="bg-dark fixed-nav sticky-footer" id="page-top">
<!-- Navegação !-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="#">
<img src="resources/img/peixe.png" width="45" height="45" class="d-inline-block align-center">
Reef Controller
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCurso"
aria-control="navbarCurso" aria-expanded="false" aria-label="Navegação Toogle">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCurso" class="collapse navbar-collapse">
<ul class="navbar-nav navbar-sidenav" id="linksaccordion" style="top: 30px;">
<li class="nav-item" data-toggle="tootip" data-placement="right">
<a class="nav-link" href="monitoramento">
<i class="fa fa-thermometer-three-quarters"></i>
<span class="nav-link-text">Monitoramento</span>
</a>
</li>
<li class="nav-item" data-toggle="tootip" data-placement="right">
<a class="nav-link" href="equipamentos">
<i class="fa fa-plug"></i>
<span class="nav-link-text">Equipamentos</span>
</a>
</li>
<!-- Opção dropdown População -->
<li class="nav-item dropdown bg-dark">
<a class="nav-link dropdown-toggle" id="menu_populacao" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-users" ></i>
<span class="nav-link-text">População</span>
</a>
<ul class="dropdown-menu bg-dark border-0 pt-0 w-100" aria-labelledby="dropdown1">
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-eercast"></i>
<span class="nav-link-text">Peixes</span>
</a>
</li>
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-yelp"></i>
<span class="nav-link-text">Invertebrados</span>
</a>
</li>
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-superpowers"></i>
<span class="nav-link-text">Corais</span>
</a>
</li>
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-exclamation-triangle"></i>
<span class="nav-link-text">Aqui Jaz</span>
</a>
</li>
</ul>
</li>
<!-- Opção dropdown Configurações -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Configurações</span>
</a>
<ul class="dropdown-menu bg-dark border-0 pt-0" aria-labelledby="dropdown1">
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Parâmetros da Água</span>
</a>
</li>
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Fotoperíodo</span>
</a>
</li>
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Equipamentos</span>
</a>
</li>
<li class="dropdown-item bg-dark">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Aquário Sustentável</span>
</a>
</li>
</ul>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a id="sidenavToggler" class="nav-link text-center">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-lg-2" id="messageDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">
Mensagens
<span class="badge badge-pill badge-primary">12 novas</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="Mensagens Dropdown">
<h6 class="dropdown-header">Novas Mensagens</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>José Francisco</strong>
<span class="small float-right text-muted">14:30</span>
<div class="dropdown-message small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="dropdown-divider"></div>
</a>
<a class="dropdown-item" href="#">
<strong>Roberto Faria</strong>
<span class="small float-right text-muted">11:10</span>
<div class="dropdown-message small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="dropdown-divider"></div>
</a>
<a class="dropdown-item" href="#">
<strong>Karina Brandão</strong>
<span class="small float-right text-muted">11:40</span>
<div class="dropdown-message small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item small">Ver Todas Mensagens</a>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-lg-2" id="alertsDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>
<span class="d-lg-none">
Alertas
<span class="badge badge-pill badge-warning">5 novos</span>
</span>
<span class="indicator text-warning d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="Alert Dropdown">
<h6 class="dropdown-header">Novos Alertas</h6>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<span class="text-success">
<strong>
<i class="fa fa-fw fa-long-arrow-up"></i>
Atualização de Estado
</strong>
</span>
<span class="small float-right text-muted">11:40</span>
<div class="dropdown-message small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
</a>
<a href="#" class="dropdown-item">
<span class="text-danger">
<strong>
<i class="fa fa-fw fa-long-arrow-down"></i>
Atualização de Estado
</strong>
</span>
<span class="small float-right text-muted">11:40</span>
<div class="dropdown-message small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
</a>
<a href="#" class="dropdown-item">
<span class="text-success">
<strong>
<i class="fa fa-fw fa-long-arrow-up"></i>
Atualização de Estado
</strong>
</span>
<span class="small float-right text-muted">11:40</span>
<div class="dropdown-message small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item small">Ver Todas Mensagens</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2" ajax="true">
<div class="input-group">
<input type="text" class="form-control" placeholder="Pesquisar...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-sign-out">Logout</i>
</a>
</li>
</ul>
</div>
</nav>
<!-- Conteúdo da Área Dinâmica -->
<div class="content-wrapper">
<div id="conteudo">
</div>
<!-- Rodapé da área dinâmica -->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright Seu Site 2019</small>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="resources/bibliotecas/jquery/jquery.min.js"></script>
<script type="text/javascript" src="resources/bibliotecas/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="resources/js/popper.min.js"></script>
<script type="text/javascript" src="resources/bibliotecas/jquery-easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="resources/js/sb-admin.min.js"></script>
<script>
$(document).ready(function() {
var domContent = $("#conteudo");
$(".nav-link").click(function() {
domContent.load($(this).attr("href"));
return false;
});
});
</script>
</body>
</html>
equipamentos.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Reef Control - Login</title>
<link rel="stylesheet" type="text/css" href="resources/bibliotecas/bootstrap-4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/bibliotecas/bootstrap-4.3.1/css/bootstrap-toggle.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/estilos.css">
</head>
<body>
<div class="container-fluid">
<div class="row bg-info text-white">
<div class="col-12"><span>Equipamentos</span></div>
</div>
<form id="formDados">
<div class="row mt-2">
<c:forEach var="dispo" items="${dispositivos}">
<div class="col-xl-4 col-lg-6 col-md-6 mb-2" id="idcard">
<div class="card bg-warning" style="min-width: 300px;">
<div class="card-header p-1 pl-3">
<!-- ObjPaginaEquipamentos.getNomeEquipamento() -->
<span class="card-title small"><strong>${dispo.nomeEquipamento}</strong></span>
<!-- ObjPaginaEquipamentos.getIconeModoAutomaticoManual() -->
<!-- ObjPaginaEquipamentos.getMensagemModoAutomaticoManual -->
<img class="float-right pr-2" src="${dispo.iconeModoAutomaticoManual}" data-toggle="tooltip" title="<fmt:message key="${dispo.mensagemModoAutomaticoManual}"/>">
</div>
<div class="card card-body py-1" style="height: 120px; background-color: #c2f0f0;">
<div class="row h-100">
<div class="col-5 pl-0 pt-3" style="max-width: 110px">
<!-- ObjPaginaEquipamentos.getIconeEstadoLigadoDesligado() -->
<!-- ObjPaginaEquipamentos.getTooltipMensagemEstadoLigadoDesligado() -->
<img src="${dispo.iconeEstadoLigadoDesligado}" class="ml-4" data-toggle="tooltip" title="<fmt:message key="${dispo.tooltipMensagemEstadoLigadoDesligado}"/>">
<!-- ObjPaginaEquipamentos.getMensagemEstadoLigadoDesligado() -->
<p class="small text-center font-weight-bold mt-2"><fmt:message key="${dispo.mensagemEstadoLigadoDesligado}"/></p>
</div>
<div class="col-7 w-100 border-2">
<div class="row h-50">
<div class="col-12 small" style="height: 20px;">
<p class="text-center "><strong>Modo Automático</strong></p>
</div>
<div class="col-12" align="center">
<div class="custom-control custom-switch">
<!-- ObjPaginaEquipamentos.getTextoModoAutomaticoManualBooleano() -->
<!-- ObjPaginaEquipamentos.getTextoModoAutomaticoManualAtivadoDesativado() -->
<input type="checkbox" class="custom-control-input" id="switch_auto_${dispo.letraEquipamento}" name="switch_auto_${dispo.letraEquipamento}"
${dispo.textoModoAutomaticoManualBooleano}>
<label class="custom-control-label" for="switch_auto_${dispo.letraEquipamento}"><fmt:message key="${dispo.textoModoAutomaticoManualAtivadoDesativado}"/></label>
</div>
</div>
</div>
<div class="row h-50">
<div class="col-12 small" style="height: 20px;">
<p class="text-center "><strong>Acionamento Manual</strong></p>
</div>
<div class="col-12" align="center">
<div class="custom-control custom-switch">
<!-- ObjPaginaEquipamentos.getEstadoLigadoDesligadoBooleano() -->
<!-- ObjPaginaEquipamentos.getTextoEstadoLigadoDesligado() -->
<input type="checkbox" class="custom-control-input" id="switch_man_${dispo.letraEquipamento}" name="switch_man_${dispo.letraEquipamento}"
${dispo.textoEstadoLigadoDesligadoBoolean} ${dispo.textoEstadoLigadoDesligadoHabilitadoDesabilitado}>
<label class="custom-control-label" for="switch_man_${dispo.letraEquipamento}"><fmt:message key="${dispo.textoEstadoLigadoDesligado}"/></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</c:forEach>
<button type="submit">Clique aqui</button>
</div>
</form>
</div>
<script type="text/javascript" src="resources/bibliotecas/jquery/jquery.min.js"></script>
<script type="text/javascript" src="resources/bibliotecas/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="resources/bibliotecas/bootstrap-4.3.1/js/bootstrap-toggle.min.js"></script>
<script>
// PARA EXIBIÇÃO DA MENSAGEM DE AJUDA SOBRE UM ITEM
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// EVITA O REFRESH DA PAGINA AO ENVIAR O SUBMIT
$("#formDados").submit(function(e) {
e.preventDefault();
var dados = $(this).serialize();
$.ajax({
type: "POST",
url: "atualizaControleEquipamentos",
data: dados,
success: function(data) {
$("#idcard").html(data); // Aqui é onde atualiza a div desta mesma página e onde replica o conteúdo
// Neste ponto deveria atualizar a div id="conteudo" da página principal.jsp
}
});
return false;
});
</script>
</body>
</html>