Thymeleaf 属性和模态答案

【问题标题】：Thymeleaf attribute and modalThymeleaf 属性和模态
【发布时间】：2019-02-06 20:57:52
【问题描述】：

编辑：刚刚发现我需要JS。请帮帮我。我有一个th:attr="data-object-id=${department.id}" 存储部门ID，我需要将其放入<input id="ids" name="ids" type="text" class="validate"> 的模态中。

JS 或 JQuery 会是什么样子？我正在尝试编写，但始终为 null 或未定义。

<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 和姓名；

【问题讨论】：

你能把你的问题说得更清楚吗？
编辑问题并添加图片
让我们展示你的班级Department或你的Java代码（不仅仅是查看层代码）
这是一个简单的类，包含字段：id、name；
实现这一目标的一个快速技巧是在您的 html 页面上创建一个隐藏的 html 元素，然后使用其在模式上的 id 获取该 html 元素的值。

标签： javascript jquery html spring-boot thymeleaf

【解决方案1】：

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

1.) 是在您的 html 页面上创建一个隐藏的 html 元素并设置值，然后在您的 modal 上使用 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
        }

【讨论】：

【解决方案2】：

您可以监听show.bs.modal事件并捕获部门ID，如下所示：

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

【讨论】：

谢谢你，Mohamed，但它适用于 Bootstrap。我已经实现了，你的脚本不想工作
尝试了将点击附加到我的 a 的 id 的建议，但这给了我另一个错误 $('#dep-modal-pic").click(...) 它只给出第一行的值。另一个只是不工作
不，我不建议点击时附加。那是针对另一篇文章的，我在那篇文章中也提到过这里发布了更好的答案。
@Neewbie 你能展示你的代码，你在哪里合并了模式生命周期事件处理程序吗？使用模态生命周期是更清洁的解决方案。

【解决方案3】：

问题解决了。非常感谢@Sumit。

th:onclick="'javascript:showFunctionModal(\'' + ${department.id} +'\');'"> 在我要获取的 id 字段上，然后在准备好的模态函数中设置 id。

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

【讨论】：