Отправка ключа HashMap через javascript в HTML форме Thymeleaf

Question

Я новичок в интерфейсе, и у меня есть одна хитрость, которую я хочу решить. Я использую шаблон MVC с HTML / Thymeleaf и Java на внутренней стороне.
Я создаю простую форму, которая получила динамически добавление и удаление элементов с карты. Эти операции выполняются на стороне сервера. Если вы хотите добавить или удалить элемент, вы просто используете javascript, который отправляет форму с флагом situationCreateSubmit=false. Модель, проходящая через форму, выглядит следующим образом:

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;
}

Итак, на внутренней стороне сначала поле situationCreateSubmit проверяет, будет ли эта форма сохранена в БД. Если значение равно false, то добавление / удаление элементов на карте выполняется и возвращается на страницу HTML. Сама карта является полем SituationModel.

Мне удалось добавить элементы на карту, но у меня проблема с удалением элементов. Я хочу иметь простую строку в таблице со значением из карты и ссылку / ботинок УДАЛИТЬ, чтобы удалить эту конкретную строку.

Я хотел бы создать функцию jQuery с некоторыми подобными «onclick» в Удалить поле , чтобы назначить этот конкретный ключ карты для removeInstitutionId, установите situationCreateSubmit в false и отправьте его по почте, как просто отправьте в контроллер .

В HTML форме, которую я использую foreach l oop по карте:

<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, который я написал, выглядит так:

$(document).ready(function() {
$("#removeinstitution").a
        select: function(event, ui) {
            $("#removeInstitutionId").val(ui.item.key);
            $("#situationCreateSubmit").val(false);
            $( "#situation-create" ).submit();
        }
    });

Я знаю, что это не может работать, но я понятия не имею, как передать ключ карты в JS и установить его в поле removeInstitutionId. Я знаю, что в Thymeleaf мы можем использовать что-то вроде __institution.key__, которое динамически генерирует это конкретное значение, но я не знаю, что с этим делать.

Информация Я не хочу изменить способ работы-> манипулировать с картой на стороне переднего конца. Что я хочу, чтобы логика манипулирования картой c на стороне сервера.
Заранее спасибо за помощь.

Answer 1

Я решил свою проблему.
Используя тимелист, мы можем сгенерировать динамически id для каждой строки в таблице. В моем случае я поставил HashMap key в качестве значения идентификатора:

<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>

Вторая функция добавлена ​​в JS:

$( ".remove-institution-css" ).click(function() {
  $("#removeInstitutionId").val($(this).attr("id"));
  $("#situationCreateSubmit").val(false);
  $( "#situation-create" ).submit();
});

, что позволяет мне:
1) Назначить HashMap ключ (идентификатор таблицы) для переменной объекта removeInstitutionId
2) Установить флаг situationCreateSubmit как ложный - это информация для бэкэнда, что форма не готова для сохранения уже.
3) Отправить форму.

Напомнить: Почему я так поступаю?
1) Я хочу полностью манипулировать HashMap на стороне сервера 2) Я новичок в HTML / Thymeleaf
Надеюсь, это кому-нибудь поможет.
С уважением