Create dynamic List Object in thymeleaf by Adding rows to Table

Question

Here is my Code Sample with Controller.

Controller class

import java.util.ArrayList;

import org.CodeDaemons.dao.Document;
import org.CodeDaemons.dao.Documents;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class Control {

    @GetMapping("/")
    public String getPage(Model model) {
        Documents  docs = new Documents();
        docs.setDocument(new ArrayList<Document>());
        docs.setId(12);
        model.addAttribute("documents",new Documents());
        return "document";
    }

    @PostMapping("/save")
    public String save(@ModelAttribute("documents") Documents docs) {
        if(docs.equals(null))
        {
            System.out.println("Bye");
        }
        else {
            System.out.println("Error");
            System.out.println(docs.getId());
            System.out.println(docs.getDocument().size());
        }
        return "save";
    }

}

Documents class which is my Model Attribute

import java.util.List;

public class Documents {

    private int id;
    private List<Document> document;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public List<Document> getDocument() {
        return document;
    }
    public void setDocument(List<Document> document) {
        this.document = document;
    }
}

& Document class

public class Document {

    private String name;
    private String printout;
    private String orignal;
    private String photocopy;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPrintout() {
        return printout;
    }
    public void setPrintout(String printout) {
        this.printout = printout;
    }
    public String getOrignal() {
        return orignal;
    }
    public void setOrignal(String orignal) {
        this.orignal = orignal;
    }
    public String getPhotocopy() {
        return photocopy;
    }
    public void setPhotocopy(String photocopy) {
        this.photocopy = photocopy;
    }
}

Html Template

<HTML  xmlns:th="http://www.thymeleaf.org">
<HEAD>
    <TITLE> Document Submission </TITLE>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>

$(document).ready(function(){

var counter = 1;
    $("#addnew").click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><select name="doc.name"><option  value="10" name="10">10th Mark-sheet</option><option value="" name="12">12th Mark-sheet</option>'+
'<option value="MSA" name="MSA">UG Mark-sheet(All Semesters)</option>'+
'<option value="UGM" name="UGM">UG Consolidated Mark-sheet</option>'+
'<option value="UGD" name="UGD">UG Degree/Provisional Degree</option>'+
'<option value="MC" name="MC">Migration Certificate</option>'+
'<option value="TC" name="TC">Transfer Certificate</option>'+
'</select></td>'+
'<td><select name="doc.original"><option value="yes">Yes</option><option value="due">Due</option><option value="NA">N/A</option></select></td><td>'+
'<select name="doc.photocopy"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td>'+
'<select name="doc.printout"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td><input type="date"></td><td><input type="date"></td></tr>');
    jQuery('table.table-hover').append(newRow);
});
});


</script>

</HEAD>
<BODY>

    <center><h1>Document Submission Record</h1></center>
    <br/>



    <!-- College Id No.</td><td> <input type="text" class="form-group">&nbsp;
    Ref. Id</td><td> <input type="text" class="form-group">&nbsp;
    Name</td> <input type="text" class="form-group">
    <br/><br/>
     -->

    <form th:action="@{/save}" method="post" th:object="${documents}">

    <center><h3><strong>Documents</strong></h3></center><br/>



    <TABLE class="table table-hover" >

        <tr>
            <th >Document Name</th>
            <th colspan="3">Document Type</th>
            <th>Received Date</th>
            <th>Due Date</th>
        </tr>

        <tr>
                <td></td>
                <td>Original</td>
                <td>Photocopy</td>
                <td>Printout</td>
                <td></td>
                <td></td>
        </tr>



        <tr th:each="doc :${documents.document}" th:field="*{document}">

                <td>
                <select name="doc.name">
                    <option value="10">10th Mark-sheet</option>
                    <option value="12">12th Mark-sheet</option>
                    <option value="MSA">UG Mark-sheet (All Semesters)</option>
                    <option value="UGM">UG Consolidated Mark-sheet</option>
                    <option value="UGD">UG Degree/Provisional Degree</option>
                    <option value="MC">Migration Certificate</option>
                    <option value="TC">Transfer Certificate</option>
                    </select>
                </td>
                <td>

                <select name="doc.original" th:field="*{document.orignal}">
                    <option value="yes">Yes</option>
                    <option value="due">Due</option>
                    <option value="NA">N/A</option>
                </select>
                </td>
                <td>


                <select name="doc.photocopy" th:field="*{document.photocopy}">
                    <option value="yes">Yes</option>
                    <option value="due">Due</option>
                    <option value="NA">N/A</option>
                </select>
                </td>

                <td>


                <select name="doc.printout"  th:field="*{document.printout}">
                    <option value="yes">Yes</option>
                    <option value="due">Due</option>
                    <option value="NA">N/A</option>
                </select>
                </td>
                <td>
                <input type="date">
                </td>
                <td>
                <input type="date">
                </td>
            </tr>
    </TABLE>

<button type="button" class="btn btn-primary" id="addnew">Add Row</button><br/><br/>
<br/>
        <button type="submit" class="btn btn-primary">Save</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</form>
</BODY>
</HTML>

on Clicking Add Row button I want to add a new Row which is working with my JQuery but I want the dynamic object list binding on posting the page & server would respond like new Object of "Documents" class will be created. and the field it contains Document will have the list of documents with name, original photocopy & printout data. which adds in Document list object with the index is increment. and on finally clicking on save button the page will bind the Document object list to Documents and then send Documents to object to the controller which I can unwrap

score 3 · Answer 1 · answered Apr 02 '20 at 11:43

First of all I also needed similar thing to bind dynamically list object where size of list can increase in client side (user can trigger event to add new row / delete row).

I used Thymeleaf and jquery to do that.

You need to replace th:field with th:name in thymeleaf like

th:name="|documents.document[0].printout|"

This will create new object with increase in index value. You don't need to iterate over list, because you will be adding object after user add new row.

In jquery where you are adding new div on button click just remove th from th:name because that code is directly gonna append on client side and thymeleaf renders on server side. So on client side th:name will not work.

 var counter = 1;
    $("#addnew").click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><select name='+ documents.document[counter].name +'><option  value="10" name="10">10th Mark-sheet</option><option value="" name="12">12th Mark-sheet</option>''<option value="MSA" name="MSA">UG Mark-sheet(All Semesters)</option> <option value="UGM" name="UGM">UG Consolidated Mark-sheet</option> <option value="UGD" name="UGD">UG Degree/Provisional Degree</option> <option value="MC" name="MC">Migration Certificate</option> <option value="TC" name="TC">Transfer Certificate</option>'+
'</select></td>'+
'<td><select name='+documents.document[counter].original +'><option value="yes">Yes</option><option value="due">Due</option><option value="NA">N/A</option></select></td><td>'+
'<select name='+documents.document[counter].photocopy+'><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td>'+
'<select name="doc.printout"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td><input type="date"></td><td><input type="date"></td></tr>');
    jQuery('table.table-hover').append(newRow);
});
});

For remove row button you need to add remove row button on every row and on that button press change the value of counter.

Create dynamic List Object in thymeleaf by Adding rows to Table

1 Answers1