CODEWITHSUNDEEP
javascriptjavahtmlspringthymeleaf
johnson
johnson

Reputation: 55

Thymeleaf pass data from html id to thymeleaf variable

I've a problem with below code. I need to pass a variable from html id to thymeleaf variable.

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

It won't work. I've to pass it using js because this id's are changeable depends on worker I click. This works, but It can't pass an id to th:href Thanks for help!

Upvotes: 0

Views: 1542

Answers (1)

cralfaro
cralfaro

Reputation: 5948

They way you have it done, you need to use Javascript to update the ID, as your modal is outside the loop. I would do something like this:

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

And in your javascript code:

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

Upvotes: 1

Related Questions