CODEWITHSUNDEEP
jqueryspring-mvcthymeleafdynamicform
xoxis
xoxis

Reputation: 11

dynamically adding input field for List child object in thymeleaf

I am trying to add an input field for child object in thymeleaf by jquery but I could not get the child object value in the controller.

Here's my code

Parent class TestList

private String inputField;

private List<ProjectTask> projectTasks = new ArrayList<>();

public TestList() {
    projectTasks = new ArrayList<ProjectTask>();
}

Child class ProjectTask

String taskName;
boolean isTaskDone;

And my jquery for creating dynamic input field, here index is a counter

$(
            '<input type="text" class="form-control quantity" '+
            'th:field="*{projectTasks[__'+index+'__].taskName}">'
        ).appendTo('#task');

Upvotes: 0

Views: 4404

Answers (2)

Ajay Kumar
Ajay Kumar

Reputation: 3250

Answering an old thread. I had a similar situation and found the solution over Google. I have two entities - Person and Contact (one-to-many).

@Entity
public class Person {
 @OneToMany(cascade = CascadeType.ALL)
    @JoinColumn(name = "person_id")
    private List<Contact> contactList = new ArrayList<>();
}

and 

 @Entity
    public class Contact {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
  }

Inside Thymeleaf template the following goes:

<tbody id="tblContacts"> <tr th:fragment="contacts" th:each="contact,rowStat : ${person.contactList}"> <td th:text="${rowStat.count}">1</td> <td><input type="hidden" th:field="${person.contactList[__${rowStat.index}__].id}"> <select class="form-control form-control-sm" th:field="${person.contactList[__${rowStat.index}__].contactType}" th:errorclass="is-invalid"> <option selected="selected" readonly value="">Select an option</option> <option value="email">Email</option> <option value="home">Home</option> <option value="business">Business</option> <option value="mobile">Mobile</option> </select> <div th:if="${#fields.hasErrors('${person.contactList[__${rowStat.index}__].contactType}')}" class="invalid-feedback" th:errors="${person.contactList[__${rowStat.index}__].contactType}"></div> </td> <td><input class="form-control form-control-sm" th:field="${person.contactList[__${rowStat.index}__].contactName}" th:errorclass="is-invalid" /> <div th:if="${#fields.hasErrors('${person.contactList[__${rowStat.index}__].contactName}')}" class="invalid-feedback" th:errors="${person.contactList[__${rowStat.index}__].contactName}"></div> </td> <td> <div class="btn-group"> <button type="button" name="removeContact" th:value="${rowStat.index}" class="btn btn-sm btn-outline-danger" data-update-contacts-url="/removeContact"> <i class="fas fa-trash"></i> </button> </div> </td> </tr> </tbody>

I also created a Github Repo for the same. Here it is. Hoping it could be useful and may help someone like me.

Upvotes: 2

Webshadow77
Webshadow77

Reputation: 1

(Even if this answer is a bit late and you may allready solved or learned the skill) I understand the main goal you are trying to get to. Without the code of the controller I can just help with the informations infront of me.

First, is to understand that thymeleaf is a server side rendering engine. That means that things like th:field="${propertyXY}" will resolfe in field="theValueOfTheProperty" and than get send to the client computer.

Second is, that jquery will only run on the client computer. So when the time for thymeleaf opperations is allready over.

With this in mind is to say, that your jquery need to be changed to something linke

$(
            '<input type="text" class="form-control quantity" field="projectTasks['+index+'].taskName}">'
        ).appendTo('#task');

For deeper understanding and an example to refer to, I would suggest: https://www.baeldung.com/thymeleaf-list. When you run the example and check the resulting HTML in youre browser, you can see how simple it can be. The value of the name attribute in the input tag referes direktly to the subelement, like you would do in Javascript.

Upvotes: 0

Related Questions