0
J'ai cherché différents jours une réponse à ma situation, mais je ne peux pas le trouver.
J'ai un code jsp où j'inclus deux modaux et quand j'essaie d'en afficher un, il ne s'affiche pas mais l'élément apparaît (dans le moniteur il n'y a pas de changements, mais le focus change sur le modal permettez-moi d'interagir avec les éléments du modal tels que les champs d'entrée)Bootstrap modal fonctionne mais ne s'affiche pas
Et la console du navigateur ne montre aucune erreur
ceci est mon code:
index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Ejercicio 1</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./">Ejercicio</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="col-md-2 sidenav" id="info">
<!-- añadir información del elemento seleccionado -->
</div>
<div class="col-md-8 text-left">
<div class="panel panel-info">
<div class="panel-heading">
<h1>Tabla de Empleados</h1>
</div>
<div class="panel-body">
<%@include file="tablaEmpleados.jsp" %>
</div>
</div>
<br>
<br>
<div class="panel panel-success">
<div class="panel-heading">
<h1>Diferencias</h1>
</div>
<div class="panel-body">
<div class="col-md-6">
<h2>Request</h2>
<p>Aquí, los atributos solo permanecen cuando la petición
esté completa, o cuando se pasa de un servlet a otro y
son utiles cuando se necesita pasar información especifica
del lado de servlet a jsp.</p><br>
<p>Un ejemplo es el resultado de una consulta.</p>
</div>
<div class="col-md-6">
<h2>Session</h2>
<p>Aquí, los atributos permanecen activos mientras la
sesión este activa, ya que se espera que haya peticiónes
relacionadas. Los atributos de sesion no se pueden pasar
de un servlet a otro. Son utiles cuando se requiere
pasar información constantemente por una sesion</p><br>
<p>Un ejemplo es la identificación de un usuario.</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 sidenav">
<div class="btn-group-vertical">
<button name="BotonAgregar" class="btn btn-info" data-toggle="modal" data-target="#ModalAgregar">
<span class="fa fa-check" aria-hidden="true"></span> Agregar
</button> <br>
<button name="BotonEditar" class="btn btn-success" data-toggle="modal" data-target="#ModalModificar" disabled>
<span class="fa fa-pencil" aria-hidden="true"></span> Editar
</button> <br>
<button name="BotonEliminar" class="btn btn-danger" id="Eliminar" disabled>
<span class="fa fa-trash" aria-hidden="true"></span> Editar
</button>
</div> <!--botones de agregar, eliminar y editar -->
</div>
</div>
<%@include file="../Modals/modalAgregar.jsp" %>
<%@include file="../Modals/modalModificar.jsp" %>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/popper.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/datatables.min.js"></script>
<script type="text/javascript" src="./js/bootbox.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
tablaEmpleados.jsp:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:include page="../app/modulo/EmpleadosServlet.do" />
<!DOCTYPE html>
<table class="table table-hover" id="tablaEmpleados">
<thead>
<tr>
<td>Nombre</td>
<td>Telefono</td>
<td>CURP</td>
<td>Correo</td>
</tr>
</thead>
<tbody id="cuerpo">
<c:forEach items="${Empleado}" var="item">
<tr class="fila">
<td class="data nombre">${item.nombre}</td>
<td class="data telefono">${item.telefono}</td>
<td class="data curp">${item.curp}</td>
<td class="data correo">${item.correo}</td>
</tr>
</c:forEach>
</tbody>
</table>
modalAgregar.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<div id="ModalAgregar" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Agregar empleado</h4>
</div>
<div class="modal-body">
<form id="Agregar">
<input type="hidden" name="event" id="evm" value="1">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control nombre" name="nombre">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control telefono" name="telefono">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
<input type="text" class="form-control curp" name="curp">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="text" class="form-control correo" name="correo">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-send" aria-hidden="true"></i></span>
<input type="submit" class="form-control" name="submit" value="Agregar empleado">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
modalModificar.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<div id="ModalModificar" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modificar empleado</h4>
</div>
<div class="modal-body">
<form id="Modificar">
<input type="hidden" name="event" value="2">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control nombre" name="nombre">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control telefono" name="telefono">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
<input type="text" class="form-control curp" name="curp" disabled>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="text" class="form-control correo" name="correo">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-send" aria-hidden="true"></i></span>
<input type="submit" class="form-control" name="submit" value="Modificar empleado">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
main.js:
$(document).ready(function() {
var ExpRegular = /[[a-z]\s]+/i;
var ExpRegularTel = /[0-9][0-9][0-9](-)[0-9](-)[0-9][0-9](-)[0-9][0-9](-)[0-9][0-9]/;
var ExpRegularCurp = /[A-Z]{4}[0-9]{6}[A-Z]{6}[0-9]{2}/;
var ExpRegularCorreo = /([a-z]|[0-9]|.|-|_)[email protected][a-z]+(.|[a-z])+/i;
var tabla = $("#tablaEmpleados").DataTable();
var nombre = "";
var telefono = "";
var curp = "";
var correo = "";
bootbox.setLocale("es");
$('#tablaEmpleados tbody').on('click', 'tr', function() {
nombre = tabla.row(this).data()[0];
telefono = tabla.row(this).data()[1];
curp = tabla.row(this).data()[2];
correo = tabla.row(this).data()[3];
$("button").each(function (index) {
$(this).removeAttr("disabled");
});
//$(".nombre").get(1).val(nombre);
//$(".telefono").get(1).val(telefono);
//$(".curp").get(1).val(curp);
//$(".correo").get(1).val(correo);
$("#info").empty();
$("#info").append("<p>Nombre: " + nombre + "</p><br><p>Telefono: " + telefono + "</p><br><p>CURP: " +
curp + "</p><br><p> Correo: " + correo + "</p>");
});
$('form').submit(function (event) {
var index = parseInt($(""));
event.preventDefault();
if (ExpRegular.exec($(".nombre").get()).val() === null || ExpRegular.exec($(".nombre").val()) !== $(".nombre").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error: El nombre no es valido"
});
} else if (ExpRegularTel.exec($(".telefono").val()) === null && ExpRegularTel.exec($(".telefono").val()) !== $(".telefono").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error, el telefono no es valido.<br> Recuerde que el formato debe ser: xxx-x-xx-xx-xx"
});
} else if (ExpRegularCurp.exec($(".curp").val()) !== null && ExpRegularCurp.exec($(".curp").val()) === $(".curp").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error, la CURP no es valido.<br> Recuerde que el formato debe ser: ABCD123456EFGHIJ78"
});
} else if (ExpRegularCorreo.exec($(".correo").val()) !== null && ExpRegularCorreo.exec($(".correo").val()) === $(".correo").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error, el correo no es valido."
});
} else {
$.ajax({
url: "app/modulo/EmpleadosServlet.do",
data: $(this).serialize(),
type: "POST",
success: function (data) {
bootbox.alert({
title: "Exito",
size: "small",
message: data
});
},
error: function (x, estado, exception) {
bootbox.alert({
title: "Error",
size: "small",
message: estado + " <br>" + exception
});
}
});
}
});
$("#Eliminar").click(function() {
bootbox.confirm({
title: "Confirmación requerida",
size: "large",
message: "¿Realmente quiere eliminar a este empleado? <br> Nombre: "
+ nombre + "<br> Telefono: " + telefono + "<br> CURP: " + curp + "<br> Correo: " + correo,
callback: function (resultado) {
if (resultado) {
$.ajax({
url: "app/modulo/EmpleadosServlet.do",
data: {
event: "1",
curp: curp
},
type: "POST",
success: function (data) {
bootbox.alert({
title: "Exito",
size: "small",
message: data
});
},
error: function (x, estado, exception) {
bootbox.alert({
title: "Error",
size: "small",
message: estado + " <br>" + exception
});
}
});
}
}
});
});
});
désolé, je ne pourrais pas voir un initialisation modale bootstrap –
J'utilise des boutons comme celui-ci