Thymeleaf modal data-target and id update in the loop

Question

I'm building a Thymeleaf+SpringBoot application and I have a moment with Thymeleaf foreach loop where I have a modal inside one div - it repeats few times and I want to update index of a modal and the button which shows it so that my modal will be shown by particular button. I have an issue with updating index because when I do it then my button stop to work and no modal is shown...

I checked:

a) How can I do data-target="#userId" in thymeleaf

b) using data-* attribute with thymeleaf

but still it does not work...

here is part of the code: The loop:

<div th:each="myth : ${allMyths}">

here is button (commented code also does not work...):

<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal"
                        data-th-target="'#'+${myth.getId()}">More...
                        <!--th:attr="data-target='#'+${myth.getId()}">More...-->
                </button>

and here is top of the modal:

<div data-th-id="${myth.getId()}" class="modal fade" role="dialog">

here also th:id does not work... Do you have any idea why button and modal does not find each other by ID?

Thanks in advance for your answers/suggestions!

Piotr

Hi Alain! Actually I don't have any error coming out when I press the button - it just don't work :) It shows the modal only when I will come back to standard setting so for example: data-target="#someId" and in the modal id="someId" — Piotr, Oct 23 '18 at 20:02
when it comes to my page it is just " " and in the dependencies I have "org.thymeleaf thymeleaf-spring3 3.0.10.RELEASE" and "org.springframework.boot spring-boot-starter-thymeleaf" — Piotr, Oct 23 '18 at 20:13
Actually I solved it in another way! I found a script in java: "" and I just declare in modal and button th:id and it works:) — Piotr, Oct 23 '18 at 20:51

score 1 · Answer 1 · answered Mar 03 '19 at 13:46

Button:

<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal" th:attr="data-target='#'+${myth.getId()}">More...</button>

Top of the Modal:

<div th:attr="id=${myth.getId()}" class="modal fade" role="dialog">

score 0 · Answer 2 · edited Dec 03 '20 at 23:50

Here is how it works in my Spring book app + thymeleaf views:

 <tbody>
                                        <tr th:each="stockItem,index :${stock}">
                                            <td th:text="${stockItem.id}"></td>
                                            <td th:text="${stockItem.productName}"></td>
                                            <td th:text="${stockItem.productPrice}"></td>
                                            <td th:text="${stockItem.productQuantity}"></td>
                                            <td>
                                                <a class="btn btn-danger" role="button"
                                                   th:href="@{/stock/removeAll/{id}(id=${stockItem.id})}">
                                                    Remove all
                                                </a>
                                                <br>
                                                <a data-target="#removeSetStockQuantityModal" data-toggle="modal"
                                                   th:attrappend="data-target=${stockItem.id}" class="btn btn-danger" role="button">Set Quantity</a>
                                                <!-- Modal -->
                                                <div class="modal fade" id="removeSetStockQuantityModal"
                                                     th:attrappend="id=${stockItem.id}" tabindex="-1" role="dialog"
                                                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Delete <span
                                                                        th:text="${stockItem.productName}"></span></h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <form action="#" method="get"
                                                                      th:action="@{/stock/delete}"
                                                                      th:object="${stockItem}">
                                                                    <input  hidden name="id" th:value="${stockItem.id}"/>
                                                                    <label th:for="${stockProduct.productQuantity}">
                                                                        <input  type="number"
                                                                               placeholder="Enter quantity to delete" th:default="0"
                                                                               th:field="${stockProduct.productQuantity}"/>
                                                                    </label>
                                                                    <input type="submit" class="btn btn-danger" value="Delete"/>
                                                                </form>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                        data-dismiss="modal">Cancel
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>

Thymeleaf modal data-target and id update in the loop

2 Answers2