带有复选框的SpringBoot + Thymeleaf动态表与Controller通信

Question

Maybe the title is more confusing than the problem it self. Here's my situation, with Thymeleaf I show a table with a list of clients. It shows Name, LastName, a button to delete it and a checkbox to display it's state (if the user is active or inactive)

<table class="table">
<thead>
<tr>
    <th>Name</th>
    <th>Last Name</th>
</tr>
</thead>
<tbody>
<tr th:each="client : ${clientList}">
    <td th:text="${client.name}"></td>
    <td th:text="${client.lastName}"></td>
    <td>
        <a th:href="@{/delete_client/} + ${client.id}" class="btn btn-danger">Delete</a>
    </td>
    <td>
        <input type="checkbox" name="my-checkbox" th:checked="${client.state} ? 'checked'">
    </td>

</tr>
</tbody>

So far, no problem. But what I don't know how to do is communcate the controller when the user click the checkboxes, in order to disable or enable that particular client.

Something like what the button does to delete the client, but to change it's state.

I was told to use AJAX, but don't know how.

Thank you!

Answer 1

You can avoid ajax. For deleting-alike effect you can apply following steps to the td element containing a checkbox:

• wrap up the checkbox in the form tag
• provide the proper action attribute in the form . The action is an endpoint which handles updating of a client's state (similarily to /delete_client/ )
• provide onclick="submit();" attribute in the checkbox, which will trigger mentioned endpoint when the user clicks it

Eg

<td>
    <form th:action="@{/switch_client_state/} + ${client.id}">
        <input type="checkbox" name="my-checkbox" onclick="submit();" th:checked="${client.state} ? 'checked'">
    </form>
</td>