Thymeleaf属性和模态 [英] Thymeleaf attribute and modal

问题描述

编辑：
只是想通了我需要JS。 Plase，帮帮我吧。我有一个 th：attr =data-object-id = $ {department.id}谁存储了部门ID，我需要将其放入< input id =idsname =idstype =textclass =validate> 。

Edited: Just figured out that i need JS. Plase, help me with this. I have a th:attr="data-object-id=${department.id}" who store Department id, which i need to put in the modal in the <input id="ids" name="ids" type="text" class="validate">.

JS或JQuery将如何？我想写，但所有时间null或undefined。

How will JS or JQuery looks like? I am trying to write, but all time null or undefined.

<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，所以我可以更新它

I need to give ID value of department to MODAL, so i can update it

我的部门课程很简单。只有ID和名称;

My Departments class is easy. Only ID and name;

推荐答案

实现相同的2个技巧（PS - 我不是前端专家）： -

The 2 tricks to achieve the same (PS - I'm not a Frontend expert):-

1。）是否在html页面上创建一个隐藏的html元素&设置值，然后在模态上使用jquery获取该元素的值。

1.) Is to create a hidden html-element on your html page & set the value and then get the value of that element using jquery on your modal.

2。）在该html元素上创建一个函数并将动态值传递给它然后在该函数中实现模态隐藏/显示代码，如下所示： -

2.) create a function on that html-element and pass the dynamic value to it and then implement your modal hide/show code inside that function, something like this :- -

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

你的功能是这样的： -

and your function would be something like this :-

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

这篇关于Thymeleaf属性和模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！