Wicket: how to implements not grouped radio buttons - java

I have 4 columns of radio buttons in a table. Problem: in Wicket, the radio buttons of a same group need to be grouped under one Wicket tag but it's impossible to do it in HTML because a table is declared row by row.
Code example
<table id="table1">
<thead>
<tr>
<td>Group 1</td>
<td>Group 2</td>
<td>Group 3</td>
<td>Group 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
<tr>
<td><input type="radio" name="group1" wicket:id="g1b1"><\td>
<td><input type="radio" name="group2" wicket:id="g2b1"><\td>
<td><input type="radio" name="group3" wicket:id="g3b1"><\td>
<td><input type="radio" name="group4" wicket:id="g4b1"><\td>
</tr>
<tr>
<td><input type="radio" name="group1" wicket:id="g1b2"><\td>
<td><input type="radio" name="group2" wicket:id="g2b2"><\td>
<td><input type="radio" name="group3" wicket:id="g3b2"><\td>
<td><input type="radio" name="group4" wicket:id="g4b2"><\td>
</tr>
<tr>
<td><input type="radio" name="group1" wicket:id="g1b3"><\td>
<td><input type="radio" name="group2" wicket:id="g2b3"><\td>
<td><input type="radio" name="group3" wicket:id="g3b3"><\td>
<td><input type="radio" name="group4" wicket:id="g4b3"><\td>
</tr>
<tr>
<td><input type="radio" name="group1" wicket:id="g1b4"><\td>
<td><input type="radio" name="group2" wicket:id="g2b4"><\td>
<td><input type="radio" name="group3" wicket:id="g3b4"><\td>
<td><input type="radio" name="group4" wicket:id="g4b4"><\td>
</tr>
</tbody>
</table>
As you see, the four groups are mixed together and if I create a group that doesn't exist in HTML, an exception is thrown.
If I declare different groups with the same wicket id, only the last radio button I add is taken into account.
Can anyone help me out?


Wrap the Radios with four nested RadioGroups, and pass the correct group instance to each Radio constructor:
final RadioGroup<Integer> radioGroup1 = new RadioGroup<Integer>("radioGroup1", new Model<Integer>());
final RadioGroup<Integer> radioGroup2 = new RadioGroup<Integer>("radioGroup2", new Model<Integer>());
final RadioGroup<Integer> radioGroup3 = new RadioGroup<Integer>("radioGroup3", new Model<Integer>());
final RadioGroup<Integer> radioGroup4 = new RadioGroup<Integer>("radioGroup4", new Model<Integer>());
add(new FeedbackPanel("feedback"));
add(new Form<Void>("form")
.add(radioGroup1
.add(radioGroup2
.add(radioGroup3
.add(radioGroup4
.add(new Loop("loop", 10) {
#Override
protected void populateItem(LoopItem item) {
Model<Integer> itemModel = Model.of(item.getIndex());
item.add(new Radio<Integer>("radio1", itemModel, radioGroup1));
item.add(new Radio<Integer>("radio2", itemModel, radioGroup2));
item.add(new Radio<Integer>("radio3", itemModel, radioGroup3));
item.add(new Radio<Integer>("radio4", itemModel, radioGroup4));
item.add(new Label("label", itemModel));
}
})))))
.add(new Button("submit") {
#Override
public void onSubmit() {
info(Strings.join(", ",
radioGroup1.getModelObject().toString(),
radioGroup2.getModelObject().toString(),
radioGroup3.getModelObject().toString(),
radioGroup4.getModelObject().toString()));
}
}));
<div wicket:id="feedback"></div>
<form wicket:id="form">
<div wicket:id="radioGroup1">
<div wicket:id="radioGroup2">
<div wicket:id="radioGroup3">
<div wicket:id="radioGroup4">
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr wicket:id="loop">
<td><input type="radio" wicket:id="radio1"></td>
<td><input type="radio" wicket:id="radio2"></td>
<td><input type="radio" wicket:id="radio3"></td>
<td><input type="radio" wicket:id="radio4"></td>
<td><span wicket:id="label"></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<button wicket:id="submit" type="submit">Submit</button>
</form>


I think you could the RadioGroup tag wrapping the table (or even the tbody tag). A wicket:container tag won't mess with the HTML structure. Like this:
<wicket:container wicket:id="group">
<table id="table1">
<!-- The rest of the table markup -->
</table>
</wicket:container>

Related

how to set each row to pass its values to servlet - whatever input I click, I have always first row

Why I can only count value for first row, though Jsp displays every row with correct values.
It always pass first row of data to the Servlet. If I choose first row it works, but if I choose any other it takes values of first row and program collapse due to empty string.
#Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {
PrintWriter printWriter = response.getWriter();
String currency = request.getParameter("currency");
int id = Integer.parseInt(request.getParameter("id"));
float rates = Float.parseFloat(request.getParameter("rates"));
float amount =
Float.parseFloat(request.getParameter("amount"));;
float euro = amount * rates;
printWriter.append(String.valueOf(id)).append(" : ");
printWriter.append(currency).append(" - ");
printWriter.append("rate : ").append(String.valueOf(rates));
printWriter.append(" ---> You have got
").append(String.valueOf(euro)).append("
Euros");
}
<form action="/exchangeServlet" method="post">
<table border="1">
<tr>
<th>Currency</th>
<th>Rate</th>
<th>Amount</th>
<th>Action</th>
</tr>
<c:forEach var="tempValue" items="${kalkulatorList}"
varStatus="counter">
<tr>
<input type="hidden" name="id" value="${tempValue.id}">
<td><input type="hidden" name="currency"
value="${tempValue.currency}">${tempValue.currency}</td>
<td><input type="hidden" name="rates"
value="${tempValue.rates}">${tempValue.rates}</td>
<td><input type="number" name="amount" placeholder="enter
amount"/></td>
<td><input type="submit" value="Exchange"></td>
</tr>
</c:forEach>
</table>
</form>
JSP view after loaded data from a xml file:
<tr>
<td><input type="hidden" name="currency"
value="USD">USD</td>
<td><input type="hidden" name="rates"
value="1.0067">1.0067</td>
<td><input type="number" name="amount" value="0.0"
placeholder="enter amount"/></td>
<td><a href="/exchangeServlet?
command=Exchange&currencyId=2">Exchange</a></td>
</tr>
<tr>
<td><input type="hidden" name="currency"
value="JPY">JPY</td>
<td><input type="hidden" name="rates"
value="138.02">138.02</td>
<td><input type="number" name="amount" value="0.0"
placeholder="enter amount"/></td>
<td><a href="/exchangeServlet?
command=Exchange&currencyId=3">Exchange</a></td>
</tr>
<tr>
<td><input type="hidden" name="currency"
value="BGN">BGN</td>
<td><input type="hidden" name="rates"
value="1.9558">1.9558</td>
<td><input type="number" name="amount" value="0.0"
placeholder="enter amount"/></td>
<td><a href="/exchangeServlet?
command=Exchange&currencyId=4">Exchange</a></td>
</tr>

Display new select field if previous select field option is chosen

image of form showing misplaced dropdown field
i have used SO to create some script that shows/hides a div containing a field if the value of a previous field is "UpperGI". This works fine, but what i cannot do is use tr or td tags within the div.
I want the new field to be displayed in a simple table as the previous fields are.
function yesnoCheck(that) {
if (that.value == "UpperGI") {
document.getElementById("ifYes").style.display = '';
} else {
document.getElementById("ifYes").style.display = "none";
}
}
<form name="frm1" action="https://api-mapper.clicksend.com/http/v2/send.php" method="post">
<table style="width:50%">
<tr>
<td>MRN:</td>
<td><input name="customstring" id="mrn" type="text" /></td>
</tr>
<tr>
<td>Specialty:</td>
<td><select id="specialty" onchange="yesnoCheck(this);">
<option value="Breast">Breast</option>
<option value="UpperGI">UpperGI</option>
<option value="Vascular">Vascular</option>
<option value="Unknown">Unknown</option></select>
</td>
</tr>
<tr><td>
<div id="ifYes">
Select Operation:
<select id="Operation">
<option value="LapChole">Lap Chole</option>
</div>
</td></tr>
<tr>
<td></td>
<td><input type="button" value="SUBMIT" onClick="doall()"></td>
</tr>
</table>
</form>
Can anyone tell me what i am doing wrong?

<tr> it's your row, <td> your case.
You can add some css to fix col size
<script>
function yesnoCheck(that) {
if (that.value == "UpperGI") {
document.getElementById("ifYes").style.display = '';
} else {
document.getElementById("ifYes").style.display = "none";
}
}
</script>
<form name="frm1" action="https://api-mapper.clicksend.com/http/v2/send.php" method="post">
<table style="width:50%">
<tr>
<td>MRN:</td>
<td><input name="customstring" id="mrn" type="text" /></td>
</tr>
<tr>
<td>Specialty:</td>
<td><select id="specialty" onchange="yesnoCheck(this);">
<option value="Breast">Breast</option>
<option value="UpperGI">UpperGI</option>
<option value="Vascular">Vascular</option>
<option value="Unknown">Unknown</option></select>
</td>
</tr>
<tr id="ifYes" style="display: none">
<td>Select Operation:</td>
<td>
<select id="Operation">
<option value="LapChole">Lap Chole</option>
</select>
</td></tr>
<tr>
<td></td>
<td><input type="button" value="SUBMIT" onClick="doall()"></td>
</tr>
</table>
</form>

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>

Thymeleaf Map Form Binding

db.html
<div th:each="pr, stat: *{mergeMap}">
<tr>
<td><input type="text" name="key" th:value="${pr.key}" /></td>
<td><input type="text" name="value" th:value="${pr.value}" /></td>
</tr>
</div>
On submitting this input, i always get mergeMap to be empty at the Spring Controller. What should be done to get the value of mergeMap?
Controller.java
#RequestMapping(value = "/shot")
public String saveMergeProducts(#ModelAttribute(value="prod") MergedProductInfoDTO prod, BindingResult bindingResult,
Model model, HttpServletRequest request) {
System.out.println(prod.toString());
return "forward:/backoffice/db";
}
HTML
<form action="#" th:action="#{shot}" method="POST" th:object="${prod}">
<tr>
<td><span th:text="${index.index}"></span></td>
<td><input type="text" name="id" th:value="*{id}" th:readonly="readonly" /></td>
<td><input type="text" name="categoryName" th:value="*{categoryName}" th:readonly="readonly" /></td>
<td><input type="text" name="subCategoryName" th:value="*{subCategoryName}" th:readonly="readonly" /></td>
<td><input type="text" name="productBrand" th:value="*{productBrand}" /></td>
<td><input type="text" name="productSubBrand" th:value="*{productSubBrand}" /></td>
<td><input type="text" name="series" th:value="*{series}" /></td>
<td><input type="text" name="model" th:value="*{model}" /></td>
</tr>
<tr>
<td colspan="7">
<tr>
<th>KEY</th>
<th>VALUE</th>
</tr>
<div th:each="pr, stat: *{mergeMap}">
<tr>
<td><input type="text" name="mergeMapKey" th:value="${pr.key}" /></td>
<td><input type="text" name="mergeMapValue" th:value="${pr.value}" /></td>
</tr>
</div>
</table>
</td>
<td><input type="text" name="tags" th:value="*{tags}" /></td>
<td><input type="submit" value="Submit" /></td>
</tr>

To access the Map property of the form-backing bean, use the __${...}__ preprocessor
<div th:each="pr, stat: *{mergeMap}">
<tr>
<td><input type="text" name="value" th:value="${pr.key}" readonly="true"/></td>
<td><input type="text" name="value" th:field="*{mergeMap[__${pr.key}__]}"/></td>
</tr>
</div>
What it does it evaluates the inner expression first before evaluating the whole expression. Note that in this case, ${pr.key} should not be modified so that the update will be reflected to the map property of the bean bound to the form.
Reference : http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields

Cannot add data into database for crud using servlet

<form action="addCustServlet" method="POST" name="frmAddUser">
<table>
<tr>
<td><h3 class="templatemo-gold">ID Number: </h3></td>
<td>
<input type="text" name="cust_id" size="12" value="<c:out value="${customer.cust_id}" />" /> <br/><br/></td>
</tr>
<tr>
<td><h3 class="templatemo-gold">Name: </h3></td>
<td><input type="text" name="custName" size="50"
value="<c:out value="${customer.custName}" />" /> <br/><br/></td>
</tr>
<tr>
<td><h3 class="templatemo-gold">Address: </h3></td>
<td><input type="text" name="custAdd" size="50"
value="<c:out value="${customer.custAdd}" />" /><br/><br/></td>
</tr>
<tr>
<td><h3 class="templatemo-gold">Region: </h3></td>
<td><input type="text" name="custRegion" size="50"
value="<c:out value="${customer.custRegion}" />" /><br/><br/></td>
</tr>
<tr>
<td><h3 class="templatemo-gold">Handphone No: </h3></td>
<td><input type="text" name="custHandphoneNo" size="50"
value="<c:out value="${customer.custHandphoneNo}" />" />><br/><br/></td>
</tr>
<tr>
<td><h3 class="templatemo-gold">Phone No: </h3></td>
<td><input type="text" name="custPhoneNo" size="50"
value="<c:out value="${customer.custPhoneNo}" />" /><br/><br/></td>
</tr>
<tr>
<td><h3 class="templatemo-gold">Email: </h3></td>
<td><input type="text" name="custEmail" size="50"
value="<c:out value="${customer.custEmail}" />" /><br/><br/></td>
</tr>
<tr>
<td> <input type="submit" name="submit" class="btn text-uppercase templatemo-btn templatemo-info-btn">Submit </td>
</tr>
</table>
</form>
Whenever I try to insert data using jsp form, it keeps executing nullPointerException as my cust_id is not auto generated or auto increment.
After I click addbutton, servlet sent to updateUser and data cannot be inserted.
Customer customer = new Customer();
customer.setCustName(request.getParameter("custName"));
customer.setCustAdd(request.getParameter("custAdd"));
customer.setCustRegion(request.getParameter("custRegion"));
customer.setCustHandphoneNo(request.getParameter("custHandphoneNo"));
customer.setCustPhoneNo(request.getParameter("custPhoneNo"));
customer.setCustEmail(request.getParameter("custEmail"));
String cust_id = request.getParameter("cust_id");
if(cust_id == null || cust_id.isEmpty())
{
dao.addUser(customer);
}
else
{
customer.setCust_id(cust_id);
dao.updateUser(customer);
}
RequestDispatcher view = request.getRequestDispatcher(LIST_USER);
request.setAttribute("customer", dao.getAllCustomer());
view.forward(request, response);
}

Categories

Resources