Here is the code for the modal window
<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true" th:fragment="userModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Заголовок меняется в зависимости от операции -->
<h5 class="modal-title" id="userModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form th:object="${user}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
... another code!!!
<footer class="footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-sm">Edit</button>
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</footer>
</form>
</div>
</div>
</div>
</div>
Here is the code of the script that fills the window with data
<script>
var saveUserUrl = '[[@{/saveUser}]]';
var deleteUserUrl = '[[@{/deleteUser}]]';
$('#userModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var userId = button.data('user-id');
var operation = button.data('operation');
var modal = $(this);
modal.find('.modal-body #userId').val(userId);
... another code!!!
var form = modal.find('.modal-body form');
if (operation === 'edit') {
form.attr('action', saveUserUrl);
} else {
// Добавляем userId к URL для удаления
form.attr('action', deleteUserUrl);
}
... another code!!!
var editButton = modal.find('.modal-body .btn-primary');
var deleteButton = modal.find('.modal-body .btn-danger');
if (operation === 'edit') {
editButton.show();
deleteButton.hide();
} else {
editButton.hide();
deleteButton.show();
}
... another code!!!
});
</script>
this is how the fragment with the modal window is inserted in the main html file
<div th:replace="~{user_modal :: userModal}"></div>
this method works when you click on the Edit button in the modal window
@PostMapping("/saveUser")
public String saveUser(@ModelAttribute("user") User user,
@RequestParam(value = "roles", required = false) List<Long> roleIds,
@RequestParam(value = "newPassword", required = false) String newPassword) {
... another code!!!
}
and this method doesn't even go when you click the Delete button in the modal window
@PostMapping("/deleteUser")
public String deleteUser(User user) {
//TODO: println
System.out.println("deleteUser: " + user.getId());
userService.delete(user.getId());
return "redirect:/admin-bootstrap";
}
although the HTTP request is displayed in the browser line http://localhost:8088/deleteUser
all necessary views are there
I tried passing userId as part of HTTP request http://localhost:8088/deleteUser?userId=100 and changed controller method like this
@PostMapping("/deleteUser")
public String deleteUser(@RequestParam("userId") Long id) {
System.out.println("deleteUser: " + id);
userService.delete(id);
return "redirect:/admin-bootstrap";
}
this didn't work either, println() wasn't output to the console.
I expect the following functionality: there is a page with a table of users, opposite each row with user data there are two buttons (Edit and Delete), when you click on Edit, a modal window opens in which the input fields are displayed, they can be changed (change the user name, password, email address) and when you click the Edit button, the user data in the database is rewritten inside the modal window - this functionality works! But when you click the Delete button, a modal window also opens, but with blocked input fields, a changed title ("Edit user" is replaced by "Delete user"), the Edit button in the modal window is hidden and the Delete button is shown and when you click on it, the corresponding controller method should work, but it does not even go into it!
I have blocked the input with csrf and corrected it in the code:
modal.find('.modal-body :input').prop('disabled', operation !== 'edit');
modal.find('#csrfToken').prop('disabled', false);