Select a row with thymeleaf and th:each

Question

I'm using thymeleaf to display a list of objects, like this:

<tr th:each="Reports : ${report}">
<td><span th:text="${Reports.id}">Id</span> </td>
<td><span th:text="${Reports.description}">Description</span></td>
<td><span th:text="${Reports.entity}">Entity</span></td>
<td><span th:text="${Reports.long}">Long</span></td>
<td><span th:text="${Reports.lat}">Lat</span></td>
<td><span th:text="${Reports.type}">Type</span></td>
<td><span th:text="${Reports.solved}">Solved</span></td>

<div class="btn-group"> 
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Azione</button>
<div class="dropdown-menu"> 
 <a class="dropdown-item" href="#">Solved</a> <div class="dropdown-divider"></div> 
<a href="" class="dropdown-item">Not Solved</a> 
</div> 
</div> 
</td>
</tr>

and it works of course. Now, I need to modify the value of "solved" with the value taken from the button present in each row, so I would take just the id (which is my primay key) and the button value to send via post to another url. How can i achieve that?

Answer 1

    <form th:action="@{'/posturl/'}" method="post">    
 <tr th:each="Reports : ${report}">
<td><span th:text="${Reports.id}" th:value="${Reports.id}">Id</span> </td>
<td><span th:text="${Reports.description}" th:value="${Reports.id}">Description</span></td>
<td><span th:text="${Reports.entity}" th:value="${Reports.id}">Entity</span></td>
<td><span th:text="${Reports.long}" th:value="${Reports.id}">Long</span></td>
<td><span th:text="${Reports.lat}" th:value="${Reports.id}">Lat</span></td>
<td><span th:text="${Reports.type}" th:value="${Reports.id}">Type</span></td>
<td><span th:text="${Reports.solved}" th:value="${Reports.id}">Solved</span></td>

and if you want to add button in each row just put the button code in each td and give the url like-

<button class="btn btn-secondary href="/someurl/"+${Reports.id}>Solved</button>

Answer 2

If sending by POST you would need to create a new object and add the two values to the new objects.

Create a HTML form with th:action set as your POST endpoint and add a th:object that will accept the two values. Then use two hidden input fields and set their values using th:value to that of the value you want to send.

Hopefully this makes sense I can add a coding example later if no one else answers / need more help later. Just on mobile currently.

Answer 3

You can use Tabledit.js .

 <script th:src="@{[javascript_folder_path]/jquery.tabledit.js}"></script>
 <script type="text/javascript">
 $('#tableEdit').Tabledit({
    url: "your_controller", 
    //saveButton: false,
    columns: {
        //identifier is used as a unique id for passing your id for db operation
        identifier: [0, 'id'],
        //Only include those fields that you want to make editable here.
        editable: [[0, 'id'], [1, 'description'], [2, 'entity'], [3, 'long'], [4, 'lat'], [5, 'type'], [6, 'solved']]

    }
});
$('#tableEdit').editableTableWidget().numericInputExample().find('td:first').focus();
$('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
window.prettyPrint && prettyPrint();
</script>