Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Alexey Papin
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexey Papin
iOS Development Techdegree Graduate 26,950 Points

How add element to List when edit item (List is element of it) in HTML/Thymeleaf

In my Spring/Thymeleaf/Hibernate project I need ability add element to field (wich is List<>) of my editing object. How I an make it, since embedded forms are not allowed? Something like that:

@Entity
public class Recipe {
    @Id
    private int id;

    private String name;
    private String description;
    private List<String> steps;
}

And my thymeleaf template:

<form th:action="@{|/save/${recipe.id}|}" method="post" th:object="${recipe}">
<input type="hidden" th:field="${recipe.id}" th:value="${recipe.id}"/>
<input type="text" th:field="${recipe.name}" th:value="${recipe.name}"/>
<input type="text" th:field="${recipe.description}" th:value="${recipe.description}"/>
<input th:each="step : ${recipe.steps}" type="text" th:field="${step}" th:value="${step}"/>

<!-- And here I want make ability add new step element to List<String> steps -->
<button>Add step</button>

How to make it, not losing already edited data of Recipe object? Add using <form> and <button type="submit">? Or just using <a href>? How dont lose entered data then?

Alexander Nikiforov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,175 Points

Not an answer but have you read about @ElementCollection in Hibernate:

http://docs.jboss.org/hibernate/orm/5.2/userguide/html_single/Hibernate_User_Guide.html

Chapter 2.8.Collection

Could you also clarify what do you mean by that

since embedded forms are not allowed

I guess it has to do with the fact that List<String> is not easy to deal with Hibernate, or do you mean something other?

Anyway in this hibernate tutorial they use List<String> in @Entity class. Again not answer, but still, may be helpful

2 Answers

Alexey Papin
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexey Papin
iOS Development Techdegree Graduate 26,950 Points

I meant what method you'll use to add element to collection? <form> <input> ? But <form> have only one value of attribute <action>, so how you will know in controller what to do with received data, just save edited item, or add element to collection (wich is field of editing item) and redirect back - to edit? Dont use <form>? How you will send editing changes and other data then? Hope you'll get point, what I mean. By the way, posted same question on stackoverflow, and posted there answer :) after find some solution:

Well, found solution, sure not ideal, but it works. Added field to my class (it will be flag, what we should do in endpoint of form-action-url: add step to List and redirect to edit again or just save. And form have 2 submit buttons: and , changes flag field to "step" by JavaScrypt, so I will know I have add element to List and redirect back. JavaScrypt:

<script type="text/javascript">
    function toggleAddedStep()
    {
        document.getElementById("recipeAddedFlag").value = "step";
    }
    function toggleAddedNothing()
    {
        document.getElementById("recipeAddedFlag").value = "";
    }
</script>

Well, I'm totally newb in JavaScrypt, so tryed make Recipe Site using just Java/Spring Security/Thymeleaf/Hibernate, figured out I need more.

Alexander Nikiforov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,175 Points

I think I understand more now, and judging by your answer it looks to me that JavaScript is right solution here. Will take this into consideration when I get to this project.