如何为模型中的每个元素生成编辑模态？

Question

I'm trying to use thymeleaf to generate edit and delete modals for each element in the model in my ModelAndView using th:each .

The modals are indeed created and have unique ids based on the id field of the elements. The problem I have is none of the values from elements are parsed into the input s to enable the user to see the current values.

They are obviously there because the view also has a table which displays each element's values along with the anchors which toggle the modals.

Here's some example code of how I'm doing it:

<div th:each="f : ${foos}" th:id="um- + ${f.id}" class="modal fade"
    tabindex="-1" role="dialog">
...
    <form role="form" th:action="@{/foo/update}" th:object="${foo}" th:method="post">
        <input type="hidden" th:field="*{id}" th:value="${f.id}"/>
        <fieldset class="form-group">
            <label for="bar">Bar</label>
            <input th:field="*{bar}" th:value="${f.bar}" class="form-control" 
                id="bar" type="text" placeholder="Bar"/>
        </fieldset>  
        ...             
    </form>
...          
</div> 

How to generate edit modals for each element in the model? I'm not sure why thymeleaf is unable to get the values of the fields from the model elements.

Answer 1

That's not a great approach actually. In addition to it not working, doing using a loop obviously creates n modals for the collection.

The solution that worked best was to provide a single modal that would be populated and submitted with Ajax calls.

This no-frills Spring Boot app has all the relavant code.