ajaxtilesspring-webflow-2thymeleaf

Spring *{} fields in a thymeleaf ajax tile


I wonder if anyone can help.

I am working on a Spring/Webflow/Tiles/Thymeleaf project. All is going reasonably well. We have tiles which represent the data entry forms, typically like this:

<form th:object="${questionnaire}">
    .... 
    <select th:field="*{title}>
        <option ..... 
    </select>
    .... 
    <input th:field="*{fname}" />
    <input th:field="*{lastname}" />
    .... 
</form>

This is working well. But now we are trying to add some ajax magic to the form. Basically the idea is that when a button is pressed it triggers a webflow transition which will render its response in a tile. This is all working well ... expect the content of the fragment tile. The idea is that the new fragment will be some extra form fields. Something like this:

<div tiles:fragment="moreDetails">
    .... 
    <input th:field="*{phone}" />
    <input th:field="*{email}" />
    .... 
</div>

The webflow and tiles part is working, but when thymeleaf tries to render the tile, it complains that the form fields refer to properties with *{} syntax, but not enclosed in a form tag with th:object

So far we've come up with only 2 workarounds. We can put the form tag with th:object in the fragment tile, but this means we have a nested form in the resultant page :( The other thing we've found we can do is simply write the input fields in the fraement with a name attribute rather than th:field Both 'solutions' feel wrong

Does anyone know if there is a better, more thymeleaf friendly way of doing this?

Cheers

Nathan


Solution

  • I posted the same question on the thymeleaf forum, and Daniel, the author of thymeleaf replied : http://forum.thymeleaf.org/Spring-fields-in-an-ajax-tile-td4025527.html

    "th:field" is in fact a sort of macro that gives a value to the "name", "id" and "value" of an input. So in case you cannot use th:field directly, you could assign "name" and "id" to a fixed value, and then "th:value" like:

    <input id="phone" name="phone" th:value="${questionnaire.phone}" />
    

    Regards, Daniel.

    Basically, the 2 workarounds I already mentioned are the ony way to achieve this. Not ideal (IMHO) but at least we have an answer.