0
Ich habe für verschiedene Tage eine Antwort auf meine missliche Lage suchen, aber ich kann es nicht finden.
Ich habe einen JSP-Code, wo ich zwei Modale einschließe und wenn ich versuche, eine von ihnen anzuzeigen, wird es nicht angezeigt, aber das Element zeigt (auf dem Monitor gibt es keine Änderungen, aber der Fokus ändert sich auf dem Modal gestatten Sie mir mit den Elementen des modalen wie Eingabefelder)Bootstrap modal funktioniert, zeigt aber nicht
Und der Browser des interagieren Konsole zeigt keine Fehler
dies ist mein 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
});
}
});
}
}
});
});
});
sorry, konnte nicht ich sehe Bootstrap-Modal-Initialisierung –
Ich benutze Tasten wie diese