Bootstrap Modal window and Thymeleaf - view

Question

I have a project with Spring Mvc and I want to use Bootstrap modal windows and Thymeleaf. I hava a view students.jsp witch get list of students from model when I make loop without Thymeleaf everything work ok.
I use JS. But when I use Thymeleaf model windows didn't work ok.
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="user-${user.id}" th:each="user: ${students}">
<td th:text="${user.id}" />
<td th:text="${user.firstName}" />
<td th:text="${user.lastName}" />
<td>
<button type="button" class="btn btn-primary editButton"
data-toggle="modal" data-target="#myModal" data-user-id="${user.id}">Edit</button>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("#myModal").on('show.bs.modal', function(e) {
var userId = $(e.relatedTarget).data('user-id');
var cols = $('#user-' + userId + ' td');
var firstName = $(cols[0]).text();
var lastName = $(cols[1]).text();
var email = $(cols[2]).text();
$('#firstNameInput').val(firstName);
$('#lastNameInput').val(lastName);
$('#emailInput').val(email);
});
$("#myModal").on('hidden.bs.modal', function() {
var form = $(this).find('form');
form[0].reset();
});
</script>
It doesn't get data from list. I don't know how to solve this problem. Please help me :)

Answer 1

There's a small problem with data-user-id attribute in your "Edit" button.
Instead of:
data-user-id="${user.id}"
...you should have:
th:data-user-id="${user.id}"
...so that the attribute is processed by Thymeleaf and ${user.id} actually replaced with expected value.

Answer 2

<tr th:each="user: ${students}" th:id="'user-' + ${user.id}">
<td th:text="${user.id}" />
<td th:text="${user.firstName}" />
<td th:text="${user.lastName}" />
<td th:text="${user.email}" />
<td>
<button type="button" class="btn btn-primary editButton"
data-toggle="modal" data-target="#myModal"
th:data-user-id="${user.id}">Edit</button>
</td>
</tr>