Ajout de nouveaux éléments dynamycally avec ajax

Question

je un morceau de code HTML en utilisant thymeleaf:

<form id="form" action="/create" th:action="@{/create}" th:object="${form}"> 

    <input type="text" th:field="*{title}"/> 

    <div th:each="item, itemInfo : *{items}"> 
     <div> 
     <input type="text" th:field="*{items[__${itemInfo.index}__].text}" /> 
     </div> 
    </div> 

    <button id="addNewBtn" onClick="add()"/> 

    <button type="submit" value="Create"/> 

</form> 

objet formulaire

a une collection appelée 'articles'. Cliquer sur le bouton 'addNewBtn' appelle la méthode javascript 'add' où elle doit contenir le code qui peut ajouter un nouvel élément à la collection (et c'est mon problème ici - je ne sais pas à quoi ressemble ce code). Est-il possible d'ajouter un nouvel élément à la collection en utilisant ajax? Il est également important que le nouvel élément ajouté soit lié à un champ appelé "texte". Ou probablement il existe une autre solution? Fondamentalement, je dois créer l'objet (après soumettre le formulaire) avec le titre et beaucoup d'articles avec le texte qui peut être ajouté dynamiquement par un utilisateur.

Merci à l'avance

Answer 1

Vous pouvez appeler (à l'aide ajax) le modèle de la ligne HTML à partir du serveur en donnant un paramètre « index ».