1
У меня есть проект с Spring Boot, и для моих шаблонов я использую Thymeleaf и Bootstrap. У меня есть DataTable, который имеет столбец действий, и одно из действий дает пользователю возможность удалить сотрудника. Я хочу добавить модальный, который спрашивает пользователя, уверен ли он, что он хочет удалить сотрудника. Это HTML:Thymeleaf не показывает bootstrap modal
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>Empleados</title>
<style media="all" type="text/css">
.alignCenter { text-align: center; }
.highlight-green{
font-weight: bold;
color: green;
}
.highlight-red{
font-weight: bold;
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://127.0.0.1:8080/satERP/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#list-personas").DataTable({
"columnDefs": [ {
"targets": 0,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData == "OK") {
$(td).addClass('highlight-green');
}
if (cellData == "Documentos Pendientes") {
$(td).addClass('highlight-red');
}
}
} ],
"aoColumns": [
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: false, sClass: "alignCenter"}
],
"language": {
"decimal": "",
"info": "Mostrando _START_ a _END_ de _TOTAL_ Empleados",
"infoEmpty": "Mostrando 0 a 0 de 0 Empleados",
"infoFiltered": "(filtrando de los _MAX_ Empleados registrados)",
"emptyTable": "No hay Empleados registrados",
"lengthMenu": "Mostrar _MENU_ entradas",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "No se encontraron registros asociados a la búsqueda",
"paginate": {
"first": "Primera",
"last": "Última",
"next": "Siguiente",
"previous": "Anterior"
}
}
});
$(window).load(function(){
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<div layout:fragment="header">
<h1>Empleados</h1>
<div th:if="${msg!=null}" class="alert alert-success" role="alert" style="margin-bottom: 0px; margin-top: 6px;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong th:text="${msg}"></strong>
</div>
</div>
<div layout:fragment="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Empleados Registrados</h3>
</div><!-- /.box-header -->
<div class="box-body">
<table id="list-personas" class="table table-bordered table-striped">
<thead>
<tr>
<th>Status</th>
<th>Identificación</th>
<th>Nombre</th>
<th>Departamento</th>
<th>Perfil</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr th:each="persona : ${personas}">
<td th:text="${persona.status.status}"/>
<td th:text="${persona.identificacion}"/>
<td th:text="${persona.nombre}"/>
<td th:text="${persona.departamento.dpto}"/>
<td th:text="${persona.perfil.perfil}"/>
<td>
<a th:href="@{'/persona/' + ${persona.id_persona}}" title="Consultar Empleado">
<i class="fa fa-info"></i>
</a>
<a th:href="@{'/persona/' + ${persona.id_persona} + '/update'}" title="Actualizar Empleado">
<i class="fa fa-pencil-square-o" style="color:green;"></i>
</a>
<a href="#" data-toggle="modal" data-target="#myModal" title="Eliminar Empleado">
<i class="fa fa-times" style="color:red;"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</div>
<div class="modal modal-danger fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" style="width: 350px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-users"></i>Eliminar Empleado</h4>
</div>
<div class="modal-body">
<div class="box-body table-responsive">
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<p>¿Está seguro que desea eliminar al empleado?</p>
</div>
</div>
</div>
</div>
</div><!-- /.modal-body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
<button id="btn-delete" type="button" class="btn btn-primary"><i class="fa fa-check"></i> Yes</button>
</div>
</div>
</div>
</div>
</body>
</html>
Я пробовал почти все, и я не могу сделать, чтобы показать модальный. Каждый раз, когда я нажимаю ссылку, он ничего не делает. Кто-нибудь знает, что происходит? Заранее спасибо.
ли вы когда-нибудь найти ответ на этот вопрос? У меня похожая проблема. – Tamb