Атрибут Thymeleaf и модальный

Question

Отредактировано: Просто понял, что мне нужен JS.Пожалуйста, помогите мне с этим.У меня есть th:attr="data-object-id=${department.id}", который хранит идентификатор отдела, который мне нужно вставить в модальное поле в <input id="ids" name="ids" type="text" class="validate">.

Как будет выглядеть JS или JQuery?Я пытаюсь написать, но все время нулевой или неопределенный.

<tr th:each="department : ${departments}">
        <td class="dep_id" th:text="${department.id}">1</td>
        <td th:text="${department.name}"></td>
        <td>
            <div class="dep_edit">
                <a class="settings_dep" th:href="@{'/departments/' + ${department.id} + '/'}"><i class="material-icons">settings</i></a>
                <a class="edit_dep modal-trigger" href="#modal3" th:attr="data-object-id=${department.id}"><i
                        class="material-icons">edit</i></a>
                <form method="post" th:action="@{'/departments/' + ${department.id} + '/delete'}" class="inline">
                    <button type="submit" value="" class="link-button delete_dep">
                        <i class="material-icons">delete</i>
                    </button>
                </form>
            </div>
        </td>
    </tr>


<div id="modal3" class="modal modal-departments">
        <div class="modal-dep modal-content">
            <h4>Update Department</h4>
            <a href="#" class="dep-modal-close modal-close"><i
                    class="material-icons icon_close">close</i></a>
            <p>Update Department name</p>
        </div>
        <div class="dep-modal">
            <form id="dep-update" class="col s12" th:action="@{'/departments/update'}" method="POST">
                <div class="row-modal-dep">
                    <div class="input-field col s6">
                        <input id="depName" name="name" type="text" class="validate">
                        <input id="ids" name="ids" type="text" class="validate">
                        <label for="name">Department Name</label>
                        <i class="edit-dep-marker material-icons prefix">mode_edit</i>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <input class="modal-close waves-green green btn-dep btn" type="submit" form="dep-update">
            </div>
        </div>
    </div>

Мне нужно указать значение ID отдела для MODAL, чтобы я мог обновить его

Мой класс Департаментовлегко.Только ID и имя;

Answer 1

Проблема решена.Огромное спасибо @ Sumit.

th:onclick="'javascript:showFunctionModal(\'' + ${department.id} +'\');'"> на поле, идентификатор которого я хочу получить, а затем в готовой модальной функции установить идентификатор.

function showFunctionModal(id) {
        $(document).ready(function () {
            $('.modal3').modal();
            $("#ids").val(id);
        });

Answer 2

Два трюка для достижения того же (PS - я не эксперт Frontend): -

1.) Это создание скрытого html-элемента на html-странице и установка значения, а затемполучите значение этого элемента, используя jquery на вашем модальном.

2.) создайте функцию для этого html-элемента и передайте ему динамическое значение, а затем реализуйте свой модальный код скрытия / показа внутри этой функции, что-токак это: - -

<a class="edit_dep modal-trigger" th:onclick="'javascript:showFunctionModal(\'' + ${department.id} +'\');'"><i
                        class="material-icons">edit</i></a>

и ваша функция будет выглядеть примерно так: -

function showFunctionModal(id) {
        //logic to hide & show function
        }

Answer 3

Вы можете прослушать событие show.bs.modal и записать идентификатор отдела, как показано ниже:

$('#modal3').on('shown.bs.modal', function (e) {
   var target = e.relatedTarget;
   var departmentId = $(target).data('object-id');
   $("#ids").val(departmentId);
});