How to generate edit modals for each element in the model?

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

score 3 · Accepted Answer · answered Jan 29 '16 at 04:31

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.

How to generate edit modals for each element in the model?

1 Answers1