Не открываются модальные окна для добавления, удаления и изменения элементов
Пытаюсь написать CRUD приложение на Spring Boot. Написал контроллер, view, но почему-то модальные окна не открываются, хотя в консоли не выдает ошибок. В чем проблема может быть?
Repository
@Repository
public interface LuRepository extends JpaRepository<Lu, Integer> {
List<Lu> findByTag(int tag);
}
Service
@Service
@Transactional(readOnly = true)
public class LuServices {
private final LuRepository repository;
@Autowired
public LuServices(LuRepository repository) {
this.repository = repository;
}
public List<Lu> findBasicLU() {
return repository.findByTag(0);
}
public Optional<Lu> findByID(int id) {
return repository.findById(id);
}
@Transactional
public void save(Lu lu) {
repository.save(lu);
}
@Transactional
public void update(int id, Lu lu) {
lu.setId(id);
repository.save(lu);
}
}
Controller
@Controller
@RequestMapping("/classifier")
public class ClassifierController {
private final LuServices luServices;
private final ModelMapper modelMapper;
@Autowired
public ClassifierController(LuServices luServices, ModelMapper modelMapper) {
this.luServices = luServices;
this.modelMapper = modelMapper;
}
@GetMapping()
public String showClassifierPage(Model model) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
PersonDetails personDetails = (PersonDetails) authentication.getPrincipal();
model.addAttribute("personDetails", personDetails);
model.addAttribute("basicLu", luServices.findBasicLU());
model.addAttribute("newBasicLuDTO", new LuDTO());
return "lu/index";
}
@RequestMapping(value = "/save", method = RequestMethod.POST)
public String save(LuDTO luDTO) {
luServices.save(convertToLu(luDTO));
return "redirect:/classifier";
}
@GetMapping("/edit")
@ResponseBody
public Optional<Lu> update(Integer id) {
return luServices.findByID(id);
}
private Lu convertToLu(LuDTO luDTO) {
return modelMapper.map(luDTO, Lu.class);
}
private LuDTO convertToLuDTO(Lu lu) {
return modelMapper.map(lu, LuDTO.class);
}
}
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:form="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" th:href="@{/styles/css/style.css}"/>
<link rel="stylesheet" href="/webjars/bootstrap/5.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" th:href="@{/styles/css/awesome/all.css}"/>
<title>Главная страница</title>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav col-10">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Главная</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Справочники</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" th:href="@{/classifier}">Классификаторы</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
</ul>
<ul class="navbar-nav col-2">
<li class="nav-item">
<span class="nav-link">
<!-- Форма для вывода данных пользователя -->
<form class="d-flex" th:action="@{/classifier}" th:object="${personDetails}"
th:method="GET">
<!-- Выводим имя и фамилию пользователя -->
<span th:text="${personDetails.getPerson().getName() + ' ' + personDetails.getPerson().getSurname()}"></span>
</form>
</span>
</li>
<li class="nav-item">
<span class="nav-link">
<form th:action="@{/logout}" th:method="POST">
<input type="submit" value="Выход" class="dropdown-item logout_btn"/>
</form>
</span>
</li>
</ul>
</div>
</div>
</nav>
<div class="page_wrapper">
<div class="container_resizer">
<div class="container__left">
<button class="btn btn-success nBtn"> New itemBasicLuDTO </button>
<div class="card">
<div class="card-block">
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Наименование</th>
<th>Системный код</th>
<th>Код</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
<tr th:each ="itemBasicLu :${basicLu}">
<td th:text="${itemBasicLu.id}"></td>
<td th:text ="${itemBasicLu.text}"></td>
<td th:text ="${itemBasicLu.lcode}"></td>
<td th:text ="${itemBasicLu.code}"></td>
<td>
<a th:href="@{classifier/delete/(id=${itemBasicLu.id})}" class="btn btn-danger delBtn">Delete</a>
<a th:href="@{classifier/edit/(id=${itemBasicLu.id})}" class="btn btn-primary eBtn">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--#Modal form for itemBasicLuDTO update-->
<div class="myFormUpdate">
<form th:action="@{/save}" method="post">
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update itemBasicLuDTO</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="alert alert-info">
Input data to the fields
</p>
<div class="form-group">
<!--<label for="id" class="col-form-label">itemBasicLuDTO id:</th:text></label>-->
<input type="hidden" class="form-control" id="id" name="id" value=""/>
</div>
<div class="form-group">
<label for="text" class="col-form-label">Text:</label>
<input type="text" class="form-control" id="text" name="text" value=""/>
</div>
<div class="form-group">
<label for="lcode" class="col-form-label">Lcode:</label>
<input type="text" class="form-control" id="lcode" name="lcode" value=""/>
</div>
<div class="form-group">
<label for="code" class="col-form-label">Code:</label>
<input type="text" class="form-control" id="code" name="code" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save"/>
</div>
</div>
</div>
</div>
</form>
</div>
<!--End update form-->
<!--#Modal for itemBasicLuDTO create-->
<div class="myFormCreate">
<form th:action="@{/save}" method="post">
<div class="modal fade" id="myModalCreate" tabindex="-1" role="dialog" aria-labelledby="modalLabelCreate" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabelCreate">Create itemBasicLuDTO</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="alert alert-info">
Input data to the fields
</p>
<div class="form-group">
<label for="text" class="col-form-label">Text:</label>
<input type="text" class="form-control" id="text" name="text" value=""/>
</div>
<div class="form-group">
<label for="lcode" class="col-form-label">Lcode:</label>
<input type="text" class="form-control" id="lcode" name="lcode" value=""/>
</div>
<div class="form-group">
<label for="code" class="col-form-label">Code:</label>
<input type="text" class="form-control" id="code" name="code" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save"/>
</div>
</div>
</div>
</div>
</form>
</div>
<!--End form-->
<!-- #Modal for removing itemBasicLuDTO -->
<div class="modal fade" id="removeModalCenter" tabindex="-1" role="dialog" aria-labelledby="removeModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="removeModalCenterTitle">Alert message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="alert alert-danger">
Are You sure You want to delete this itemBasicLuDTO?
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a href="" class="btn btn-danger" id="delRef">Delete</a>
</div>
</div>
</div>
</div>
</div>
<div class="resizer_for_div" id="dragMe"></div>
<div class="container__right">Right</div>
</div>
</div>
<footer>
Footer
</footer>
<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/5.2.0/js/bootstrap.bundle.min.js"></script></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
</body>
</html>
script test.js
$(document).ready(function(){
$('.nBtn, .table .eBtn').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
var text = $(this).text();
//for update itemBasicLuDTO
if (text == 'Edit') {
$.get(href, function (itemBasicLu, status) {
$('.myFormUpdate #id').val(itemBasicLu.id);
$('.myFormUpdate #text').val(itemBasicLu.text);
$('.myFormUpdate #lcode').val(itemBasicLu.lcode);
$('.myFormUpdate #code').val(itemBasicLu.code);
});
$('.myFormUpdate #updateModal').modal();
} else {
//for creating itemBasicLuDTO
$('.myFormCreate #text').val('');
$('.myFormCreate #lcode').val('');
$('.myFormCreate #code').val('');
$('.myFormCreate #myModalCreate').modal();
}
});
//for delete itemBasicLuDTO
$('.table .delBtn').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#removeModalCenter #delRef').attr('href', href);
$('#removeModalCenter').modal();
});
});