I have solved my problem.
Using thymeleaf we can generate dynamicaly id for each row in a table. In my case I put HashMap key as a id value:
<table class="table table-light mt-1">
<tbody>
<tr class="col-auto table-active" th_each="institution,iter:*{situation.institutions}">
<td th_text="${institution.value.name}"></td>
<td><a th_id="${institution.key}" href="#" class="col-auto remove-institutioncss">Remove</a>
</td>
</tbody>
</table>
Second functionality is put in JS:
$( ".remove-institution-css" ).click(function() {
$("#removeInstitutionId").val($(this).attr("id"));
$("#situationCreateSubmit").val(false);
$( "#situation-create" ).submit();
});
Which allows me to:
1) Assign HashMap key (table id) to the object variable removeInstitutionId
2) Set situationCreateSubmit
flag as false – it’s information for backend that form is not ready for saving already.
3) Submit form.
To remind: Why do I this way?
1)I want to have completely HashMap manipulation on the backend side
2)I’m new to HTML/Thymeleaf
Hope it would help anyone.
Regards
I’m new to front end, and have got one tricky thing I want to solve.
I’m using MVC pattern with HTML/Thymeleaf and Java on the backend side.
I create simple form which has got dynamically adding and removing items from Map. These operations itself are made on a backend side. When you want to add or remove item, you just use javascript which submit form with flag situationCreateSubmit=false
.
Model which is passing through form looks like:
public class SituationRequestModel {
@Valid
private SituationModel situation;
private Boolean situationCreateSubmit=true;
private Long addInstitutionId;
private Long removeInstitutionId;
private Long templateDocumentId;
private String fileName;
private byte[] templateDocument;
}
So on the backend side, at first the situationCreateSubmit
field is checking if this form is to be saved to db. If it’s false than adding/removing items on the map is made and return to the HTML page. Map itself is field of SituationModel
.
I managed adding items to the map, but I have a problem with removing items.
I want to have simple row in a table with value from map and link/botton REMOVE to delete this particular row.

I would like to create jQuery function with some like “onclick” on Remove field to assign this particular key of map to the removeInstitutionId
, set situationCreateSubmit
to false and send it with post like simple submit to the controller.
In HTML form I use foreach
loop through the map:
<table class="table table-dark">
<tbody>
<tr class="col-12 item-dark" th_each="institution,iter :*{situation.institutions}">
<td th_text="${institution.value.name}"></td>
<td><a id="removeinstitution" class="nav-link active" th_field="${institution.key}" >Remove</a>
</tr>
</tbody>
</table>
JS which I’ve wrote looks like:
$(document).ready(function() {
$("#removeinstitution").a
select: function(event, ui) {
$("#removeInstitutionId").val(ui.item.key);
$("#situationCreateSubmit").val(false);
$( "#situation-create" ).submit();
}
});
I know it cannot work, but I have no clue how to pass map key to the JS and set it to the removeInstitutionId
field. I know that in Thymeleaf we can use something like __institution.key__
which dynamically generate that particular value, but I don’t know what to do with that.
Information
I don’t want to change way of work-> to manipulate with map on the front end side. What I want to have map manipulation logic on the backend side.
Thank you in advance for help.