th:field and selected option in select tag

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

th:field and selected option in select tag

jviafora
Hello,
I am trying to get a better understanding around how th:field can be used to choose the default selected option in a select tag. I understand you cannot use th:field with th:selected and our implementation requires the use of th:field. Are there any clear examples or explanations of how this is intended to work? Any pointers would be greatly appreciated. Thanks!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

Zemi
Administrator
Hello,

you can use th:field with th:selected, but usually this is not necessary, depending on your needs.

For an example, you can see
  https://github.com/thymeleaf/thymeleafexamples-stsm/blob/2.1-master/src/main/webapp/WEB-INF/templates/seedstartermng.html#L87-L89
or
  http://itutorial.thymeleaf.org/exercise/12

Regards,
  Zemi

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

jviafora
This post was updated on .
Thanks Zemi.
For some reason, when I try to use th:selected in an option tag within a select tag that has th:field, the selected does not render. If I remove th:field it works fine. Your examples don't really illustrate how th:field would choose which option is tagged selected. Am I missing something?

In your second example, this code:
            <select th:field="*{paymentMethod}" th:remove="all-but-first">
                <option th:each="paymentMethod : ${paymentMethods}"
                        th:value="${paymentMethod}" th:text="${paymentMethod.description}">Credit card</option>
                <option>Another payment method</option>
                <option>Another payment method</option>
            </select>

Produces this HTML, which sets "Direct debit payment" as selected (2nd option). How does it decide to set that value? I don't really see any correlation there:
            <select id="paymentMethod" name="paymentMethod">
                <option value="CREDIT_CARD">Credit card payment</option>
                <option value="DIRECT_DEBIT" selected="selected">Direct debit payment</option>
                <option value="BANK_TRANSFER">Bank transfer payment</option>
            </select>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

Zemi
Administrator
The selected option is chosen comparing the th:field current value with each of the iteration values, performing simply an equals() comparison.

This is straighforward for String or number values, but you'll have to do a little more work if you are comparing your own objects.

Regards,
  Zemi



Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

Shusha
Please give us an example of what needs to be done when you are using your own object.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

klaasvg
This post was updated on .
"The selected option is chosen comparing the th:field current value with each of the iteration values, performing simply an equals() comparison.

This is straighforward for String or number values, but you'll have to do a little more work if you are comparing your own objects. "

Just like the previous poster I am really looking for a solution to render the selected attribute when the  th:field parameter is of the object type and cannot be compared to an int value.
This appears not to be documented and I am spending now a full day searching for a solution and still have not found one. I hope for some answers, unfortunately this forum appears to be nearly dead... :(

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

Saven
I'm also struggling with the issue of using my own objects (I'm using Spring MVC and ThymeLeaf). From what Zemi has said I would assume the equals() method has to be overwritten. I can confirm that equals is called during rendering in order to decide which item should be selected. However equals() is not called when performing a POST.
I've managed to get this working, but it seems that the select th:field must be an ordinal (e.g. an int or enum). For example:

<select th:field="*{item.id}">
    <option th:each="i, ${itemSet}" th:value="${i.id}" th:text="${i.name}"></option>
</select>

It's important to understand that the information required to rebuild the list of options must be stored in the view (i.e. the html page) otherwise the model can't be rebuilt - I'm relatively new to Spring MVC and Thymeleaf, but I'm pretty sure this is the case. So rather than store all that info, it's probably best to just use the IDs as I have here, and then the model will be rebuilt with an empty object and just the ID set. The full object can then be looked up in your controller method. For example:

@RequestMapping(params = "save", value="/items.html", method=RequestMethod.POST)
public String save(
@RequestParam Map<String,String> allRequestParams,
@ModelAttribute(value="thing") Thing thing,
Model model)
{
    int id = thing.getItem().getId();
    thing.setItem(loadItem(id));
    ...
}

Here, Thing is the parent object class and item is one of its members. The model holds the Thing but only fills in the id of the item. The ID is then used to load the full item and overwrite the otherwise empty item.
I hope that makes sense and helps someone.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: th:field and selected option in select tag

claytonsilva
In reply to this post by klaasvg
The best answer for me! Thanks!
Loading...