I have a table

<table id="deleteTable" class="display table stripe">
    <thead>
    <tr class="tr-class" style="color: white!important; background-color: #41424a!important">
        <th>Friendly Name</th>
        <th>File Path</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
        <tr th:each="list: ${canDelete}">
            <td th:text="${list.friendlyName}" style="padding-left: 1em"></td>
            <td th:text="${list.filePath}"></td>
            <td style="padding-left: 2em; width: 10em">
                <a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"><span class="glyphicon glyphicon-trash"></span></a>
            </td>
        </tr>
        <tr>
            <td style="padding-left: 1em"></td>
            <td></td>
            <td>
                <a style="padding-left: 3.2em; cursor: pointer;" data-target="#exampleModalCenter" data-toggle="modal">
                    <i class="fa fa-plus"></i>
                </a>
            </td>
        </tr>
    </tbody>
</table>

This tables uses thymeleaf th:each to iterate through a list of objects. I want to be able to click on my trashcan icon within each row of the table and delete the row. I'm trying to pass a property of the object into the modal just as a test.

Modal:

<div class="modal fade" th:id="'modal-warning'+${list.filePath}" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Remove Delete Permission</h5>
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form action="#" th:action="@{/users/deletePermissions/approve}" th:object="${canDelete}">
                <div>
                    <div>
                        <span th:text="${list.filePath}"></span>
                    </div>
                    <div style="padding-top: 1em; float: right;">
                        <button id="submitBtn" type="submit" class="mdc-button mdc-button--raised">
                            <span class="mdc-button__label">add delete permission</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

I believe the issues is within the table:

<a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"><span class="glyphicon glyphicon-trash"></span></a>

or the modal:

th:id="'modal-warning'+${list.filePath}"

Update 1:

Forgot to include the error i'm receiving..

It's telling me that within my HTML page it cannot parse null for ${list.filePath} on line 84. Which is the line of code for the modal id.. it's like it's trying to parse that right now rather than on modal load

1 Answers

1
Metroids On Best Solutions

The variable ${list} is defined in your th:each -- and is only available to children tags of your <tr />. By the time the modal html is parsed, the variable ${list} is no longer in scope. It is now null, which is why you are getting the error message.

You're going to have to change the way you are opening the modal (probably with javascript... unless you want to create a modal for each row of your table).