В процессе выполнения последнего задания пре-проекта у меня возникла проблема.
В admin.html у меня есть такая фишка, что читается набор пользователей и в ходе цикла для каждого пользователя генерировался код модальной формы, потом на веб-странице localhost:8080/admin при нажатии на кнопку редактирования эта модальная форма открывается.
//отрывок кода из admin.html:
<table class="table table-striped pt-5">
<thead>
<tr>
<th>Id</th>
<th>Role</th>
<th>Login</th>
<th>Password</th>
<th>Email</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<div th:each="user,iter: ${users}">
|
|
<tr>
<td><span th:utext="${user.id}"></span></td>
<td th:each="role: ${user.roles}"><span th:text="${role.role}"></span></td>
<td th:value="${user.name}"><span th:text="${user.name}"></span></td>
<td th:value="${user.password}"><span th:text="${user.password}"></span></td>
<td th:value="${user.email}"><span th:text="${user.email}"></span></td>
<td>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal"
th:attr="data-target='#userId-' + ${iter.index}">
Edit
</button>
<!-- Modal -->
<div class="modal fade" th:attr="id='userId-'+${iter.index}" tabindex="-1"
role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content justify-content-center">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
|
|
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="#" th:action="@{/admin}" th:object="${tempUser}"
method="post">
<div class="modal-body">
<div class="container">
<div class="row justify-content-center">
<div class="col-5 text-center">
<span>ID</span>
<input class="form-control" type="text"
th:name="id"
th:value="${user.id}"
readonly>
<span>Email</span>
<input class="form-control" type="text"
th:name="email"
th:value="${user.email}">
<span>Login</span>
<input class="form-control" type="text"
th:name="name"
th:value="${user.name}">
<span>Password</span>
<input class="form-control" type="text"
th:name="password"
th:value="${user.password}">
<select th:name="role" th:value="${user.roles[0].role}">
<option>ROLE_USER</option>
<option>ROLE_ADMIN</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Закрыть
</button>
<button type="submit" class="btn btn-primary">Edit
user
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
</div>
</tbody>
</table>
Вот пара групп скринов – на первой группе скринов я показываю то, что на localhost:8080/admin до нажатия на кнопку, на второй группе скринов то, что после.
ДО НАЖАТИЯ:
ПОСЛЕ НАЖАТИЯ: