Thymeleaf将数据从html id传递给thymeleaf变量

时间:2017-09-25 11:23:02

标签: javascript java html spring thymeleaf

我的代码存在问题。我需要将一个变量从html id传递给thymeleaf变量。

<table class="responsive-table highlight bordered">
    <thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Email</th>
    </tr>
    </thead>

    <tbody>
    <tr th:each="worker: ${workersList}">
        <td th:text="${worker.id}"></td>
        <td th:text="${worker.name}"></td>
        <td th:text="${worker.surname}"></td>
        <td th:text="${worker.email}"></td>

        <td>
            <a href="#deleteModal" class="btn tooltipped modal-trigger" th:attr="data-id=${worker.id}, data-name=${worker.name +' '+ worker.surname}"
               data-position="top" data-delay="50" data-tooltip="Delete"><i class="material-icons">delete</i></a>
        </td>
    </tr>

    <!-- Delete Modal -->
    <div id="deleteModal" class="modal modal-fixed-footer">
        <div class="modal-content">
            <p id="modal-name"></p>
            <p id="modal-id"></p>
        </div>
        <div class="modal-footer">
            <a th:href="@{'/delete/'+${modal-id} }" class="modal-action modal-close waves-effect waves-red btn-flat">Yes</a>
        </div>
    </div>

    </tbody>
</table>

<script th:inline="javascript">
    $('#deleteModal').modal({
        ready: function(modal, trigger) {
            var button = $(trigger);
            var id = button.data('id');
            $('#modal-id').html(id);
        }
    });
</script>

它不会起作用。我已经使用js传递它,因为这个id可以改变取决于我点击的工人。这样可行,但它无法将ID传递给:href感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

他们让你完成它,你需要使用Javascript来更新ID,因为你的模态在循环之外。我会做这样的事情:

<div class="modal-footer">
    <a id="idModalLink" href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Yes</a>
</div>

在你的javascript代码中:

$('#deleteModal').modal({
    ready: function(modal, trigger) {
        var button = $(trigger);
        var id = button.data('id');
        $('#modal-id').html(id);
        $('#idModalLink').attr("href", "/delete/" + id);
    }
});