Develop Reference

HTTP Post Request with nested collection in SpringBoot and Thymeleaf

I am new to Java and I'm currently working on a project with springboot and thymeleaf template engineer. I am having issues making an HTTP POST request with nested Set Collection.
My Java Classes are
User Class
import java.util.Set;
public class User {
private String name;
private String school;
private String bestSubject;
private Set<Work> work;
*//constructors, getters and setters*
}
Work Class
public class Work {
private String companyName;
private String faxNumber;
private String location;
*//constructors, getters and setters*
}
Controller
import org.springframework.beans.factory.annotation.Autowired;
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 UserController {
#Autowired
private UserService userService;
#GetMapping(value = "/user-register")
public String showUser(Model model) {
User users = new User();
model.addAttribute("users", userService.getUsersList());
return "userPage";
}
#PostMapping(value = "/user-details")
public String createUser(#ModelAttribute("users") User user){
System.out.println(user);
return "userResult";
}
}
Views
userPage.html
<form action="#" th:action="#{/user-details}" method="post" th:object="${users}">
<div class="row">
<div class="col-4">
<label for="name" class="col-form-label">Full Name:</label>
<input type="text" id="name" th:field="*{name}" class="form-control">
</div>
<div class="col-4">
<label for="school" class="col-form-label">School:</label>
<input type="text" id="school" th:field="*{school}" class="form-control">
</div>
<div class="col-4">
<label for="bestSubject" class="col-form-label">Best Subject:</label>
<input type="text" id="bestSubject" th:field="*{bestSubject}" class="form-control">
</div>
</div>
<!--BUTTON TO ADD AND DELETE FIELDS-->
<div class="row mt-4 mb-1">
<div class="col d-flex justify-content-between">
<div onclick="createField()" class="btn btn-primary float-start">Create row</div>
<div onclick="deleteField()" class="btn btn-danger float-end">Delete row</div>
</div>
</div>
<!--FIELDS LABEL-->
<div class="row">
<div class="col-4">
<label for="companyName" class="col-form-label">Company Name:</label>
</div>
<div class="col-4">
<label for="faxNumber" class="col-form-label">Fax Number:</label>
</div>
<div class="col-4">
<label for="location" class="col-form-label">Location:</label>
</div>
</div>
<table class="table table-borderless mt-0" id="userTable">
<tbody id="tableBody">
<tr th:each="user : ${users.work}">
<td>
<input type="text" id="companyName" th:field="*{user.companyName}" class="form-control">
</td>
<td>
<input type="text" id="faxNumber" th:field="*{user.faxNumber}" class="form-control">
</td>
<td>
<input type="text" id="location" th:field="*{user.location}" class="form-control">
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-warning">
SUBMIT
</button>
</form>
UserResult.html
<p>Full Name: <span th:text="${users.name}"></span></p>
<p>University: <span th:text="${users.school}"></span></p>
<p>Best Subject: <span th:text="${users.bestSubject}"></span></p>
<table class="table table-striped .table-hover mt-1">
<thead>
<tr>
<th scope="col">Company Name</th>
<th scope="col">Fax Number</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users.work}">
<td th:text="${user.companyName}">
</td>
<td th:text="${user.faxNumber}">
</td>
<td th:text="${user.location}">
</td>
</tr>
</tbody>
</table>
My QUESTION IS
I keep getting User{name='...', school='...', bestSubject='...', work { **'null**' }}
Instead of
{
name: '...'
school: '...'
work: {
company_name: '...',
fax_number: '...',
location: '...'
}
}
How do I ensure my Set collection returns the inputed data from the fields instead of null datatype?

Retrieve input(s) from DataTable

Need some advice how should I retrieve a list of exhibits.
In my html template below, I only put one record of exhibit. If i were to put additional rows/records of exhibit, how do i go about mapping them to the controller.
HTML Template
<h3>Exhibit Details</h3>
<div class="table-responsive">
<table id="exhibitTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Exhibit Type</th>
<th>Description</th>
<th>Marking</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group col-md-3">
<div class="cols-sm-10">
<select class="form-control selectpicker cols-md-3"
th:value="${exhibit.exhibitType}" id="exhibitType"
name="exhibitType" roleId="exhibitType">
<option value="">Select Type</option>
<option>Desktop</option>
<option>Laptop</option>
<option>Mobile Device</option>
<option>Portable Storage</option>
<option>Server</option>
<option>Video System</option>
<option>Save As</option>
<option>Others</option>
</select>
</div>
</div>
</td>
<td>
<div class="form-group col-md-3">
<input type="text" name="exhibitDescription"
id="exhibitDescription"
th:value="${exhibit.exhibitDescription}" />
</div>
</td>
<td>
<div class="form-group col-md-3">
<input type="text" name="exhibitMarking" id="exhibitMarking"
th:value="${exhibit.exhibitMarking}" />
</div>
</td>
<td><div class="form-group col-md-3">
<input type="text" name="exhibitRemarks" id="exhibitRemarks"
th:value="${exhibit.exhibitRemarks}" />
</div></td>
</tr>
</tbody>
</table>
</div>
Controller
#RequestMapping(value = "/register", method = RequestMethod.POST)
public String registerIncidentPost(#ModelAttribute("incident") Incident incident,
#ModelAttribute("exhibit") Exhibit exhibit, Principal principal) throws Exception {
long year = Calendar.getInstance().get(Calendar.YEAR);
incident.setIncidentYear(year + "");
Long refNo = incidentService.findMaxRefNoCurrentYear(year + "");
if (refNo == null)
refNo = (long) 1;
else
refNo += 1;
incident.setIncidentRefNo(refNo);
incident.setIncidentStatus(Incident.INCIDENT_REGISTERED);
incident.setIncidentOpeningTimestamp(new Date());
User user = userService.findByUsername(principal.getName());
incident.setIncidentCreatedBy(user);
incidentService.createIncident(incident);
exhibitService.createExhibit(exhibit);
return "redirect:/incident";
}
I've attempted to add the following to my template
<tr data-th-each="exhibit:${exhibitList}">
and the following to my controller
#ModelAttribute("exhibitList") ArrayList<Exhibit> exhibitList
but did not work.
Thanks in advance.

I can only assume this is vb.net since you didn't specify. You need to pass in the complete dataset to the page. Each item in the dataset will be one pre-loaded instance of the model. Then you can do a for each loop on the page itself and generate the html dynamically. Hope this helps.

Removing just one Row in table - SpringBoot & Java & Thymeleaf

New to Spring-boot and Java and Thymeleaf...Trying to make it so the trash button deletes only one row in this table. Right now it if any trash button is clicked, all table rows are deleted.
I ran the debugger and my controller is picking up the rowId for whichever button is clicked, so not sure why it's deleting all rows and not just the one. Any ideas?
//code that loads form and table (table is made up of Ams360Policies)
#GetMapping("/directBind")
public String getDirectBind(Model model){
List<String> businessAgencies = new ArrayList<String>();
businessAgencies.add("Personal");
businessAgencies.add("Commercial");
businessAgencies.add("Life");
businessAgencies.add("Benefits");
businessAgencies.add("Health");
businessAgencies.add("Non P and C");
model.addAttribute("businessAgencies", businessAgencies);
DirectBind directBind = new DirectBind();
List<Ams360Policy> ams360Policies = new ArrayList();
Ams360Policy ams360Policy = new Ams360Policy();
ams360Policies.add(ams360Policy);
model.addAttribute("ams360Policies", ams360Policy);
List<String> billTypeList = new ArrayList<String>();
billTypeList.add("Direct Bill");
billTypeList.add("Agency Bill");
model.addAttribute("billTypeList", billTypeList);
ams360Policy.setBillTypeOptions(billTypeList);
List<String> businessAgencyList = new ArrayList<String>();
directBind.setBusinessAgencyList(businessAgencyList);
model.addAttribute("directBind", directBind);
return "directBind";
}
//code to add a Row to table
#RequestMapping(value="/directBind", params="addPolicy")
public String addPolicy(final DirectBind directBind, Model model){
List<Ams360Policy> ams360Policies = directBind.getAms360Policies();
Ams360Policy ams360Policy = new Ams360Policy();
ams360Policies.add(ams360Policy);
model.addAttribute("ams360Policies", ams360Policies);
List<String> billTypeList = new ArrayList<String>();
billTypeList.add("Direct Bill");
billTypeList.add("Agency Bill");
model.addAttribute("billTypeList", billTypeList);
ams360Policy.setBillTypeOptions(billTypeList);
List<String> businessAgencyList = new ArrayList<String>();
directBind.setBusinessAgencyList(businessAgencyList);
return "directBind";
}
//code to Remove row of table
#RequestMapping(value = "/directBind", params="removeRow")
public String removeRow(final DirectBind directBind, final HttpServletRequest req, Model model){
final Integer rowId = Integer.valueOf(req.getParameter("removeRow"));
List<Ams360Policy> ams360Policies = directBind.getAms360Policies();
model.addAttribute("ams360Policies", ams360Policies);
directBind.setAms360Policies(ams360Policies);
Ams360Policy ams360Policy = new Ams360Policy();
List<String> billTypeList = new ArrayList<String>();
billTypeList.add("Direct Bill");
billTypeList.add("Agency Bill");
model.addAttribute("billTypeList", billTypeList);
ams360Policy.setBillTypeOptions(billTypeList);
List<String> businessAgencyList = new ArrayList<String>();
directBind.setBusinessAgencyList(businessAgencyList);
directBind.getAms360Policies().remove(1);
model.addAttribute("directBind", directBind);
return "directBind";
}
//html code for table
<div>
<h4 style="display: inline;">AMS360 Policy Setup</h4>
<input type="submit" formnovalidate="formnovalidate" name="addPolicy" class="btn btn-default" style="margin-left: 1rem; margin-bottom: 1rem;" value="+"></input>
</div>
<div class="col-sm-12">
<hr/>
<table class="table table-striped AMSTable" data-classes="table-no-bordered" data-striped="true" data-show-columns="true" data-pagination="true">
<thead>
<tr>
<th>Policy Number</th>
<th>Policy Term Start Date</th>
<th>Policy Term End Date</th>
<th>Line of Coverage</th>
<th>Parent Company</th>
<th>Writing Company</th>
<th>Bill Type</th>
<th>Quote Premium</th>
<th>Commission</th>
</tr>
</thead>
<tbody>
<tr id="newPolicyRow" th:each="ams360Policy, stat : ${ams360Policies}">
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyNumber}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyTermDateStart}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyTermDateEnd}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].lineOfCoverage}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].parentCompany}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].writingCompany}"/></td>
<td id="billTypeCell">
<div th:each="billType : ${billTypeList}">
<input type="checkbox" th:field="*{ams360Policies[__${stat.index}__].billTypeOptions}" th:value="${billType}"/>
<label th:text="${billType}" id="billTypeLabel"></label>
</div>
</td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].quotePremium}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].commission}"/></td>
<td class="text-right"> <button type="submit" name="removeRow" th:value="${stat.index}" class="btn btn-danger" ><span class="fa fa-trash"></span></button></td>
</tr>
</tbody>
</table>
</div>
When I debug I get the following...

//html code for table
<div>
<h4 style="display: inline;">AMS360 Policy Setup</h4>
<input type="submit" formnovalidate="formnovalidate" name="addPolicy" class="btn btn-default" style="margin-left: 1rem; margin-bottom: 1rem;" value="+"></input>
</div>
<div class="col-sm-12">
<hr/>
<table class="table table-striped AMSTable" data-classes="table-no-bordered" data-striped="true" data-show-columns="true" data-pagination="true">
<thead>
<tr>
<th>Policy Number</th>
<th>Policy Term Start Date</th>
<th>Policy Term End Date</th>
<th>Line of Coverage</th>
<th>Parent Company</th>
<th>Writing Company</th>
<th>Bill Type</th>
<th>Quote Premium</th>
<th>Commission</th>
</tr>
</thead>
<tbody>
<tr id="newPolicyRow" th:each="ams360Policy, stat : ${ams360Policies}">
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyNumber}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyTermDateStart}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyTermDateEnd}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].lineOfCoverage}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].parentCompany}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].writingCompany}"/></td>
<td id="billTypeCell">
<div th:each="billType : ${billTypeList}">
<input type="checkbox" th:field="*{ams360Policies[__${stat.index}__].billTypeOptions}" th:value="${billType}"/>
<label th:text="${billType}" id="billTypeLabel"></label>
</div>
</td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].quotePremium}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].commission}"/></td>
<td class="text-right"> <button type="submit" name="removeRow" th:value="${stat.index}" class="btn btn-danger" ><span class="fa fa-trash"></span></button></td>
</tr>
</tbody>
</table>
</div>

unable to bind ModelMap through ajax call in Spring MVC

MY JSP PAGE:
<form action="manageparentexamforchildren.htm" class="form-horizontal form-bordered" >
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-1"><spring:message code="label.parent.children"/></label>
<div class="col-md-3">
<select name="parent.children" class="form-control" id="children" required="true" >
<option value="">-<spring:message code="label.select"/>-</option>
<c:forEach items="${studentsOfThisParent}" var="student">
<option value="${student.id}">${student.firstName} ${student.lastName}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="form-actions fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn blue"><i class="icon-ok"></i><spring:message code='button.search'/></button>
<button type="button" onclick="javascript:history.go(-1);" class="btn red default"><spring:message code='button.cancel'/></button>
</div>
</div>
</div>
</div>
</form>
<c:forEach items="${modelList}" var="examination">
<tr>
<td><b><spring:message code="label.examination.schoolexam"/></b>:<c:out value="${examination.schoolExam.name}" /></td>
</tr>
<table border="1" width="1000" height="200" class="table table-bordered table-hover">
<thead> <tr><th class="active"><spring:message code="label.examination.subjects"/></th><th class="active"><spring:message code="label.exam.Date"/></th><th class="active"><spring:message code="label.exam.maxmarks"/></th></tr></thead>
<tbody>
<c:forEach items="${examination.examinationSubjects}" var="examinationSubject" varStatus="status">
<tr>
<td class="success"><c:out value="${examinationSubject.subjects.name}" /></td>
<td class="success" ><c:out value="${examinationSubject.date}" /></td>
<td class="success"><c:out value="${examinationSubject.maxMarks}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</c:forEach>
MY CONTROLLER:
#RequestMapping(value="/manageparentexam.htm", method=RequestMethod.GET)
public String manageparentexam(ModelMap modelMap,HttpServletRequest request )
{
Parent parent = parentService.getParentById(getLoggedInUser().getId());
List <Student> studentsOfThisParent=parentService.getStudentsOfThisParent(getLoggedInUser().getId());
Student student=null;
student=parent.getStudentAdmission().get(0).getStudent();
modelMap.addAttribute("modelList",student.getStudentAdmission().getClasses().getExamination());
setupCreate(modelMap, request);
return "tileDefinition.manageparentexam-"+getNameSpace();
}
#RequestMapping(value="/manageparentexamforchildren.htm", method=RequestMethod.GET)
public void manageparentexamforchildren(ModelMap modelMap,HttpServletRequest request )
{
Long studentId=Long.valueOf(request.getParameter("parent.children"));
modelMap.addAttribute("modelList",studentService.getById(studentId).getStudentAdmission().getClasses().getExamination());
setupCreate(modelMap, request);
}
here my requirement is,when ever,i select a value in select box,then the table should get updated through ajax,here i am unable to bind the model list through ajax call . . .

What I would do is separate the table in another jsp. yourTable.jsp like this
<table border="1" width="1000" height="200" class="table table-bordered table-hover">
<thead> <tr><th class="active"><spring:message code="label.examination.subjects"/></th><th class="active"><spring:message code="label.exam.Date"/></th><th class="active"><spring:message code="label.exam.maxmarks"/></th></tr></thead>
<tbody>
<c:forEach items="${examination.examinationSubjects}" var="examinationSubject" varStatus="status">
<tr>
<td class="success"><c:out value="${examinationSubject.subjects.name}" /></td>
<td class="success" ><c:out value="${examinationSubject.date}" /></td>
<td class="success"><c:out value="${examinationSubject.maxMarks}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
Then you include this jsp in your main mapge inside a div
<div id="yourTable">
<c:jsp include="yourTable.jsp/>
</div>
Then in your select you have to add a listener and when something has change you need to make a JQuery load lo reload the table rendering the table from the controller again with all the changes that you want
$('#yourTable').load("url of your controller where you will render yourTable.jsp");
And in the controller you will render yourTable.jsp and you will add in the ModelAndView object the examinationSubject

How to validate jsp page using HTMl5

I have two submit button in one form,if I click on first submit button(i.e cashPaymentDiv save butoon) both submit buttons fields are validating. I want to validate only one div while submitting form.
<form name="customerForm" action="saveTransactionBill.do">
<div id="paymentModeDiv">
<table>
<tr>
<td><label
style="margin: 0; width: 100px; display: block; padding: 5px 0; color: #737373; font: bold 12px Arial, Helvetica, sans-serif; float: left;">Payment
Mode:</label></td>
<td><select onchange="showPaymentDivs();"
name="paymentMode">
<option value="">--Select--</option>
<option value="cash">Cash</option>
<option value="cheque">Cheque</option>
</select></td>
</tr>
</table>
</div>
<div id="cashPaymentDiv" class="required">
<table>
<tr>
<td><label>Amount Paid:</label></td>
<td><input name="amountPaid" id="cashPaymentForBillWise" onchange="calculateBalAmount();"
required x-moz-errormessage="Enter Username" pattern="[0-9]{0,20}"
title="Please enter only numrics." ></td>
</tr>
<tr>
<td><input type="submit" value="cash Save"></td>
</tr>
</table>
</div>
<div id="chequePaymentDiv" class="required">
<table>
<tr>
<td><label>Amount Paid:</label></td>
<td><input name="amountPaid" id="cashPaymentForBillWise" onchange="calculateBalAmount();"
required x-moz-errormessage="Enter Username" pattern="[0-9]{0,20}"
title="Please enter only numrics." ></td>
</tr>
<tr>
<td><input type="submit" value="cheque Save"></td>
</tr>
</table>
</div>
</form>