I'm having troubles with thymeleaf and spring boot to display data in table after a form filled succesfuly. Here is what i done:
Form:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Cargar Agenda</h3>
</div>
<div th:if="${error != null}" th:text="${error}" class="alert alert-danger" role="alert">
</div>
<div class="panel-body">
<form th:action="#{/guardar}" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="nombre" id="nombre" th:value="${nombre}" placeholder="Nombre">
</div>
<div class="form-group">
<input type="text" class="form-control" name="apellido" id="apellido" th:value="${apellido}" placeholder="Apellido">
</div>
<div class="form-group">
<input type="text" class="form-control" name="telefono" id="telefono" th:value="${telefono}" placeholder="Teléfono">
</div>
<div class="form-group">
<input type="text" class="form-control" name="email" id="email" th:value="${email}" placeholder="E-mail">
</div>
<div class="form-group">
<input type="text" class="form-control" name="domicilio" id="domicilio" th:value="${domicilio}" placeholder="Domicilio">
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Table:
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="thead-dark">
<tr class="bg-primary" scope="row">
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Teléfono</th>
<th scope="col">E-mail</th>
<th scope="col">Domicilio</th>
</tr>
</thead>
<tbody>
<tr scope="row" th:each="agenda : ${listaAgendas}">
<td scope="col" th:text="${agenda.nombre}"></td>
<td scope="col" th:text="${agenda.apellido}"></td>
<td scope="col" th:text="${agenda.telefono}"></td>
<td scope="col" th:text="${agenda.email}"></td>
<td scope="col" th:text="${agenda.domicilio}"></td>
</tr>
</tbody>
</table>
</div>
Controller PostMapping:
#PostMapping("/guardar")
public String guardar(ModelMap map, #RequestParam String nombre, #RequestParam String apellido,
#RequestParam Long telefono, #RequestParam String email,
#RequestParam String domicilio) {
try {
agendaService.crear(nombre, apellido, telefono, email, domicilio);
} catch (AgendaException ex) {
map.put("error", ex.getMessage());
map.put("nombre", nombre);
map.put("apellido", apellido);
map.put("telefono", telefono);
map.put("email", email);
map.put("domicilio", domicilio);
return "carga";
}
return "lista-agendas";
}
Controller GetMapping:
#GetMapping("/lista-agendas")
public String listaAgendas(ModelMap map) {
List<Agenda> listaAgendas = agendaService.listaAgendas();
map.put("listaAgendas", listaAgendas);
return "lista-agendas";
}
lista-agendas-html render this by his self
Filled form
but lista-agendas.html after clicking the form button, display table without data:
no data in the table after clicking form button to submit
Solved ! just replaced in #PostMapping guardar method
return "lista-agendas";
with:
return "redirect:/lista-agendas";
Related
I'm trying to set boxes' elements copied from medicineBox's values like below. Can anyone help me in this. I need to post medicineOrder model to the controller
<tr th:each="medicineBox : ${medicine.medicineBoxes}">
<td class="text-center">
<input type="text" th:field="*{boxes[__${medicineBoxStat.index}__].boxNumber}" th:value="${medicineBox.box.number}" />
</td>
<td class="text-center" th:text="${medicineBox.medicineCount}"></td>
<td><input type="number" th:field="*{boxes[__${medicineBoxStat.index}__].medicineCount}" class="form-control" /></td>
</tr>
I'm using two object here -
medicine and medicineOrder
------------------> Controller method to get the page
#GetMapping("/{medicineId}")
public String loadMedicineDetailPage(#PathVariable("medicineId") long medicineId, Model model) {
model.addAttribute("medicine", service.getMedicineById(medicineId));
model.addAttribute("medicineOrder", new MedicineOrder());
return WebPages.MEDICINE_DETAIL.toString();
}
------------------> thymeleaf html page
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Spring Boot Application</title>
</head>
<body>
<div class="container">
<br/>
<a class="btn btn-primary" th:href="#{/mvc/medicine/list}">Back</a>
<br/>
<br/>
<h3 class="text-center alert alert-success">Medicine Details</h3>
<form class="row g-3" action="#" th:action="#{/mvc/medicine/sell}" method="post" th:object="${medicineOrder}">
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="name" class="form-label">Name</label>
<input type="text" style="background-color:#95edea" disabled class="form-control" id="name" th:field="${medicine.name}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="company" class="form-label">Company</label>
<input type="text" disabled class="form-control" id="company" th:field="${medicine.companyStringName}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="price" class="form-label">Price</label>
<input type="text" disabled class="form-control" id="price" th:field="${medicine.price}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="count" class="form-label">Count</label>
<input type="text" class="form-control" id="count" th:field="${medicine.count}"/>
</div>-->
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="volume" class="form-label">ML</label>
<input type="text" disabled class="form-control" id="volume" th:field="${medicine.volume}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="purchaseDate" class="form-label">Date Purchased</label>
<input type="text" disabled class="form-control" id="purchaseDate" th:field="${medicine.purchaseDate}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="boxNo" class="form-label">Box Number</label>
<input type="text" class="form-control" id="boxNo" th:field="${medicine.boxNumber}"/>
</div>-->
**<input type="hidden" th:field="*{medicineId}" th:value="${medicine.medicineId}"/>**
<table class="table table-bordered">
<tr class="table-primary">
<td>Box Number</td>
<td>Medicine Count</td>
<td>Sell Count</td>
</tr>
<tr th:each="medicineBox : ${medicine.medicineBoxes}">
<td class="text-center">
**<input type="text" th:field="*{boxes[__${medicineBoxStat.index}__].boxNumber}" th:value="${medicineBox.box.number}"** />
</td>
<td class="text-center" th:text="${medicineBox.medicineCount}"></td>
<td><input type="number" th:field="*{boxes[__${medicineBoxStat.index}__].medicineCount}" class="form-control" /></td>
</tr>
</table>
<button class="btn btn-primary" type="submit">Sell</button>
</form>
</div>
</body>
</html>
---------------> Controller method to handle the post request
#PostMapping("/sell")
public String sellMedicine(#ModelAttribute MedicineOrder medicineOrder, BindingResult bindingResult) {
if(bindingResult.hasErrors()){
// error handling
}
service.sellMedicine(medicineOrder);
return "redirect:/mvc/medicine/list";
}
----------------> Class MedicineOrder
package com.example.demo.dto;
import com.example.demo.model.Box;
import java.util.ArrayList;
import java.util.List;
public class MedicineOrder {
private long medicineId;
private List<OrderedBox> boxes = new ArrayList<>();
public long getMedicineId() {
return medicineId;
}
public void setMedicineId(long medicineId) {
this.medicineId = medicineId;
}
public List<OrderedBox> getBoxes() {
return boxes;
}
public void setBoxes(List<OrderedBox> boxes) {
this.boxes = boxes;
}
#Override
public String toString() {
return "MedicineOrder{" +
"medicineId=" + medicineId +
", boxes=" + boxes +
'}';
}
}
package com.example.demo.dto;
public class OrderedBox {
private String boxNumber;
private int medicineCount;
public String getBoxNumber() {
return boxNumber;
}
public void setBoxNumber(String boxNumber) {
this.boxNumber = boxNumber;
}
public int getMedicineCount() {
return medicineCount;
}
public void setMedicineCount(int medicineCount) {
this.medicineCount = medicineCount;
}
#Override
public String toString() {
return "OrderedBox{" +
"boxNumber='" + boxNumber + '\'' +
", medicineCount=" + medicineCount +
'}';
}
}
Not able to get the MedicineOrder.medicineId and medicineBorder.boxes[*].boxNumber from template to model object.
After lot of searching I didn't find any answer which is solving the issue only using thymeleaf.
To solve this issue I had to add two hidden input field for medicineId and boxNumber on medicineOrder object and populate those input field using javascript as below. Anyway if anyone find the solution by only using thymeleaf, please let me know.
Populated those fields using javascript
<script>
function function__02__number__assignment(_element){
var __element = _element.children[0];
var __tElement1 = __element.children[0];
var __tElement2 = __element.children[1];
// Copy value from 2 to 1
__tElement1.value = __tElement2.value;
}
function function__01__box_traverse(){
var rootElement = document.getElementsByClassName('box-stock-details');
for(var __i=0 ; __i < rootElement.length ; __i++) {
function__02__number__assignment(rootElement[__i]);
}
function_01_01_medicineId();
return true;
}
function function_01_01_medicineId(){
var _00_1_id_src = document.getElementById('00-1-id-src');
var _00_1_id_dest = document.getElementById('00-1-id-dest');
_00_1_id_dest.value = _00_1_id_src.value;
}
</script>
updated template file
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Spring Boot Application</title>
</head>
<body>
<div class="container">
<br/>
<a class="btn btn-primary" th:href="#{/mvc/medicine/list}">Back</a>
<br/>
<br/>
<h3 class="text-center alert alert-success">Medicine Details</h3>
<form class="row g-3" action="#" th:action="#{/mvc/medicine/sell}" method="post" th:object="${medicineOrder}">
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="name" class="form-label">Name</label>
<input type="text" style="background-color:#95edea" disabled class="form-control" id="name" th:field="${medicine.name}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="company" class="form-label">Company</label>
<input type="text" disabled class="form-control" id="company" th:field="${medicine.companyStringName}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="price" class="form-label">Price</label>
<input type="text" disabled class="form-control" id="price" th:field="${medicine.price}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="count" class="form-label">Count</label>
<input type="text" class="form-control" id="count" th:field="${medicine.count}"/>
</div>-->
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="volume" class="form-label">ML</label>
<input type="text" disabled class="form-control" id="volume" th:field="${medicine.volume}"/>
</div>
<div class="col-md-6 col-xs-12 col-sm-12">
<label for="purchaseDate" class="form-label">Date Purchased</label>
<input type="text" disabled class="form-control" id="purchaseDate" th:field="${medicine.purchaseDate}"/>
</div>
<!--<div class="col-md-6 col-xs-12 col-sm-12">
<label for="boxNo" class="form-label">Box Number</label>
<input type="text" class="form-control" id="boxNo" th:field="${medicine.boxNumber}"/>
</div>-->
<!-- Hidden input to get the value of medicineId from Medicine object -->
<input id="00-1-id-src" type="hidden" th:value="${medicine.medicineId}"/>
<!-- Hidden input to set the medicineId on MedicineOrder object -->
<input id="00-1-id-dest" type="hidden" th:field="*{medicineId}" />
<table class="table table-bordered">
<tr class="table-primary">
<td>Box Number</td>
<td>Medicine Count</td>
<td>Sell Count</td>
</tr>
<tr class="box-stock-details" th:each="medicineBox : ${medicine.medicineBoxes}">
<td class="text-center">
<input hidden th:field="*{boxes[__${medicineBoxStat.index}__].boxNumber}" />
<input disabled class="form-control" type="text" th:value="${medicineBox.box.number}" />
</td>
<td class="text-center" th:text="${medicineBox.medicineCount}"></td>
<td><input type="number" th:field="*{boxes[__${medicineBoxStat.index}__].medicineCount}" class="form-control" /></td>
</tr>
</table>
<button class="btn btn-primary" type="submit" onclick="return function__01__box_traverse()">Sell</button>
</form>
</div>
</body>
<script>
function function__02__number__assignment(_element){
var __element = _element.children[0];
var __tElement1 = __element.children[0];
var __tElement2 = __element.children[1];
// Copy value from 2 to 1
__tElement1.value = __tElement2.value;
}
function function__01__box_traverse(){
var rootElement = document.getElementsByClassName('box-stock-details');
for(var __i=0 ; __i < rootElement.length ; __i++) {
function__02__number__assignment(rootElement[__i]);
}
function_01_01_medicineId();
return true;
}
function function_01_01_medicineId(){
var _00_1_id_src = document.getElementById('00-1-id-src');
var _00_1_id_dest = document.getElementById('00-1-id-dest');
_00_1_id_dest.value = _00_1_id_src.value;
}
</script>
</html>
I'm leaving the JSF environment and I have some doubts when using Spring mvc with Thymeleaf. As in the example below, I have the account object related to a tariff list, what I am trying to accomplish is to add the tariffs of the account being registered in the tariff list that is in my object account, so, when saving the object of the account, fees are recorded through the waterfall. What is the best way to implement this simple funcinality with spring and thymeleaf.
Account Class
public class Account {
private Integer accountNumber;
private BigDecimal balance;
#ManyToOne(targetEntity=Rate.class, cascade={CascadeType.PERSIST, CascadeType.MERGE, CascadeType.REMOVE})
#JoinColumn(name="RateCode", foreignKey= #ForeignKey(name = "fk_account_rate"))
private List<Rate> rates;
// get and sets
}
Rate
public class Rate {
private Long rateCode;
private String rateName;
private BigDecimal value;
// get and sets
}
Controller Account
#Controller
#RequestMapping("/account")
public class AccountController {
#Autowired AccountRepository accountRepository;
#GetMapping
public ModelAndView new(Account account) {
ModelAndView model = new ModelAndView("page/account/cadAccount");
model.addObject("rate", new Rate());
model.addObject(account);
return model;
}
}
Page Account
<form th:object="${account}" method="POST" th:action="#{/account/save}">
<gff:message/>
<div class="box-body">
<input type="hidden" th:field="*{accountCode}"/>
<div class="row">
<div class="col-md-12">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">Account</li>
<li>Rates</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_conta">
<div class="row">
<div class="col-md-4">
<div class="form-group" gff:classforerror="name">
<label>Account name</label>
<input type="text" th:field="*{name}" class="form-control input-sm">
</div>
</div>
<div class="form-group col-md-4" gff:classforerror="balance">
<label>Balance</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="text" th:field="*{balance}" data-thousands="." data-decimal="," data-prefix="R$ " class="form-control currency input-sm">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_tarifas">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Rate Name</label>
<input id="nomeTarifa" type="text" th:field="${rate.name}" class="form-control input-sm">
</div>
</div>
<div class="form-group col-md-3">
<label>Value</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input id="valorTarifaID" type="text" th:field="${rate.value}" data-thousands="." data-decimal="," data-prefix="R$ " class="form-control currency input-sm">
</div>
</div>
<div class="form-group col-md-2">
<a class="btn btn-info pull-left" th:href="#{/account/add}">
<i class="fa fa-plus"></i>
Add
</a>
</div>
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Name"></td>
<td data-title="Value"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button id="salveButtonID" type="submit" class="btn btn-primary ajax">Salve</button>
<a class="btn btn-default ajax" th:href="#{/}">Cancel</a>
</div>
</form>
I just started with Spring two month ago and never did Ajax or JavaScript before. So i'm pretty new to this. What i want to do is load data from a GET Method in my Controller to populate this into a modal. I'm using ajax for this. Basicly i did what this guy https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/ is doing. But it's not working.
Hope somebody can help me with this.
Here is my Controller:
#RequestMapping(path="/reservations/details/{reservationId}", method=RequestMethod.GET)
public #ResponseBody String getReservationDetails(#PathVariable("reservationId") String reservationId, Model model, Principal principal, HttpServletRequest request){
LOGGER.info(LogUtils.getDefaultInfoStringWithPathVariable(request, Thread.currentThread().getStackTrace()[1].getMethodName(), " reservationId ", reservationId.toString()));
User authenticatedUser = (User) ((Authentication) principal).getPrincipal();
if(authenticatedUser.getAdministratedRestaurant() == null) {
LOGGER.error(LogUtils.getErrorMessage(request, Thread.currentThread().getStackTrace()[1].getMethodName(), "The user " + authenticatedUser.getUsername() + " has no restaurant. A restaurant has to be added before offers can be selected."));
return null;
}
Reservation reservation = reservationRepository.findOne(Integer.parseInt(reservationId));
if(reservation == null){
return null;
}
List<ReservationOffers> reservationOffers = reservation.getReservation_offers();
if(reservationOffers == null){
return null;
}
model.addAttribute("offers", reservationOffers);
return "reservations :: reservationTable";
}
This is the button which calls the JavaScript within the "reservation.html"
<button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
Here is the modal I want to show:
<div id="reservationModal" class="modal fade" role="dialog" th:fragment="reservationTable">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" th:text="'Reservation Details'">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="reservationTable">
<thead>
<tr>
<td th:text="'Name'"></td>
<td th:text="'Amount'"></td>
</tr>
</thead>
<tbody>
<tr th:each="offer : ${offers}">
<td th:text="${offer.getOffer().getTitle()}"></td>
<td th:text="${offer.getAmount()}"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
There is a empty div in my reservation.html
<div id="modalHolder">
</div>
And there is the JavaScript with Ajax:
<script th:inline="javascript" type="text/javascript">
function openReservationModal(id) {
$.ajax({
url: "/reservations/details/"+id,
success: function(data) {
console.log(data);
$("#modalHolder").html(data);
$("#reservationModal").modal("show");
}
});
}
</script>
Thank you guys!
EDIT:
Here is the Table which contains the button:
<form action="#" th:object="${wrapper}" method="post">
<div style="height: 190px; overflow: auto;">
<table class="table table-hover" id="reservationTable">
<thead>
<tr>
<th th:text="#{reservations.label.oderId}">Id</th>
<th th:text="#{reservations.label.customername}">name</th>
<th th:text="#{reservations.label.datetime}">date with time</th>
<th th:text="#{reservations.label.price}">price</th>
<th th:text="#{reservations.label.donation}">customer donation</th>
<th th:text="#{reservations.label.priceWithDonation}">price included with Donation</th>
<!-- <th th:text="#{reservations.label.confirmed}">finished reservation</th> -->
<!-- <th th:text="#{reservations.label.isfree}">free reservation</th> -->
<th th:text="#{reservations.label.choice}">reservation selection</th>
<th th:text="#{reservations.label.details}">reservation details</th>
</tr>
</thead>
<tbody>
<tr th:each="reservation, stat: *{reservations}">
<div th:switch="${reservation.isUsedPoints()}">
<div th:case="false">
<td th:text="${reservation.getReservationNumber()}"></td>
<td th:text="${reservation.getUser().getUsername()}"></td>
<td th:text="${#dates.format(reservation.reservationTime, 'HH:mm')}"></td>
<td><span th:text="${#numbers.formatDecimal(reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"> </span> €</td>
<td><span th:text="${#numbers.formatDecimal(reservation.getDonation(), 1, 'POINT', 2, 'COMMA')}"> </span> €</td>
<td><span th:text="${#numbers.formatDecimal(reservation.getDonation() + reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"> </span> €</td>
<!-- <td th:text="${reservation.isConfirmed()}"></td> -->
<!-- <td th:text="${reservation.isUsedPoints()}" ></td> -->
<td>
<input type="hidden" th:field="*{reservations[__${stat.index}__].id}" />
<input type="checkbox" th:field="*{reservations[__${stat.index}__].confirmed}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/>
</td>
</div>
<div th:case="true">
<input type="hidden" th:field="*{reservations[__${stat.index}__].id}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].confirmed}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/>
</div>
<td>
<button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</td>
</div>
</tr>
</tbody>
</table>
</div>
<button type="submit" class="btn btn-success" th:text="#{reservations.button.confirm}" name="confrim" style="float: right; margin-right: 25px;"></button>
<button type="reject" class="btn btn-success" th:text="#{reservations.button.reject}" name="reject" style="float: right; margin-right: 25px;"></button>
<input type="hidden"
th:name="${_csrf.parameterName}"
th:value="${_csrf.token}" />
</form>
Okay i found two mistakes by myselfe. First the Table which contians the button had the same id as the modal. The second one was the #ResponseBody Annotation in the controller. Now its returning the right data to the console but still not to the modal.
Here is the output on the console:
Data: <div id="reservationModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="reservationOfferTable">
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr>
<td>Schwarzer Kaffe</td>
<td>1</td>
</tr>
<tr>
<td>Haxn</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When you select an Expense object from the data table for editing, the edit method in the controller sends the Expense object to the edit screen that is the same to insert a new record. When the object is sent to the save method, it has nullo code attribute where an insert occurs instead of an update. I do not understand why.
Controller
#Controller
#RequestMapping("/despesas")
public class DespesaController {
#Autowired private DespesaService despesaService;
#Autowired private DespesaRepository despesaRepository;
#GetMapping("/add")
public ModelAndView novo(Despesa despesa) {
ModelAndView model = new ModelAndView("page/cadastro/despesa/cadDespesa");
model.addObject("tiposDespesa", TipoDespesa.values());
model.addObject("formasPagamento", FormaPagamento.values());
model.addObject(despesa);
return model;
}
#PostMapping("/save")
public ModelAndView salvar(Despesa despesa, BindingResult result, RedirectAttributes attributes) {
if (result.hasErrors()) {
return novo(despesa);
}
despesa.setDataDespesa(new Date());
despesaService.salvarDespesa(despesa);
attributes.addFlashAttribute("mensagem", "Despesa Salva com Sucesso!");
return new ModelAndView("redirect:/cadastroDespesa");
}
#GetMapping("/listDespesa")
public ModelAndView listagemDeDespesas() {
ModelAndView model = new ModelAndView("page/cadastro/despesa/listDespesa");
model.addObject("despesas", despesaRepository.findAll());
return model;
}
#GetMapping("/edit{id}")
public ModelAndView editar(#PathVariable("id") Long codigo) {
return novo(despesaRepository.findOne(codigo));
}
}
FormEdit
<form th:object="${despesa}" method="POST" th:action="#{/despesas/save}">
<div class="box-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Data</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" th:field="*{dataDespesa}" class="form-control" disabled="disabled">
</div>
</div>
<div class="form-group">
<label>Valor</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="text" th:field="*{valor}" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Tipo Despesa</label>
<select class="form-control select2" th:field="*{tipoDespesa}" style="width: 100%;">
<option th:each="tipo : ${tiposDespesa}" th:value="${tipo}" th:text="${tipo}"></option>
</select>
</div>
<div class="form-group">
<label>Forma Pagamento</label>
<select class="form-control select2" th:field="*{formaPagamento}" style="width: 100%;">
<option th:each="forma : ${formasPagamento}" th:value="${forma}" th:text="${forma}"></option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Observação</label>
<input type="text" th:field="*{observacao}" class="form-control">
</div>
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">Salvar</button>
<a class="btn btn-default" th:href="#{/}">Cancelar</a>
</div>
</form>
Data Table Where I select the object for editing
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Data</th>
<th>Valor</th>
<th>Tipo Despesa</th>
<th>Forma Pagamento</th>
</tr>
</thead>
<tbody>
<tr th:each="obj : ${despesas}">
<td data-title="Data" th:text="${#calendars.format(obj.dataDespesa, 'dd/MM/yyyy HH:mm:ss')}"></td>
<td data-title="Valor" th:text="${#numbers.formatCurrency(obj.valor)}"></td>
<td data-title="Tipo Despesa" th:text="${obj.tipoDespesa}"></td>
<td data-title="Forma Pagamento" th:text="${obj.formaPagamento}"></td>
<td><a th:href="#{/despesas/edit{id} (id=${obj.codigoDespesa})}"><i class="glyphicon glyphicon-pencil"></i></a></td>
</tr>
</tbody>
</table>
As sr.praneeth said you need to add the fields you want to populate into the form, usually the ID are not visible but you need to send them.
<form th:object="${despesa}" method="POST" th:action="#{/despesas/save}">
<div class="box-body">
<input type="hidden" th:field="*{id}"/>
...
</form>
Then in your Controller you will be able to retrieve the id value, null if its a creation, or informed if its an update
I am working on application using html, thymeleaf, Spring MVC, I wanted to send table data to spring controller but in when I clicked on save button of the application, getting an error on console:
java.lang.IllegalStateException: Neither BindingResult nor plain
target object for bean name 'salesProduct[0]' available as request
attribute
at org.springframework.web.servlet.support.BindStatus.(BindStatus.java:144)
at org.thymeleaf.spring4.util.FieldUtils.getBindStatusFromParsedExpression(FieldUtils.java:396)
Browser Error:
HTTP Status 500 - Request processing failed; nested exception is
org.thymeleaf.exceptions.TemplateProcessingException: Error during
execution of processor
'org.thymeleaf.spring4.processor.attr.SpringInputGeneralFieldAttrProcessor'
(sales:290)
I have added three attributes to controller like salesBean, paymentBean and salesProductFormBean, you can see in below spring controller code that is the reason in html I have not added th:object="${...}" in the form tag.
HTML
Sales.html
<form th:action="#{/salesForm}" method="post" class="mainData"
id="form">
<div class="buttonBar" id="mainbutton">
<div>
<button class="btn" id="save" type="submit">
<img th:src="#{/resources/images/save.svg}" /> Save
</button>
<button class="btn" id="reset" onclick="clearForm()" type="reset">
<img th:src="#{/resources/images/reset.svg}" /> Reset
</button>
<button type="button" class="btn" id="clientNew">
<img th:src="#{/resources/images/notebook.svg}" /> Client Creation
</button>
</div>
</div>
<div class="container">
<div class="mp-pusher" id="mp-pusher">
<nav id="mp-menu" class="mp-menu"></nav>
<div class="scroller-inner"></div>
<div class="containerMain">
<div class="mainArea">
<div class="inputArea">
<div class="ccode">
<lable class="lable">Client code</lable>
<input type="text" class="inputfield" id="ccode"
th:field="*{salesBean.client.clientId}" />
<button type="button" class="inputbutton" id="clientData"></button>
</div>
<div>
<ul class="tabs" data-persist="true">
<li>Basic data</li>
<li>Payment</li>
</ul>
<div class="tabcontents">
<div id="tab1">
<div class="invNo">
<lable class="lable">Invoice number</lable>
<input type="text" id="invNo" th:field="*{salesBean.salesId}"
name="salesId" class="inputfield disabled"
readonly="readonly" />
</div>
<div class="invdate calendar">
<lable class="lable">Invoice date</lable>
<input type="date" class="inputfield" id="invdate"
th:field="*{salesBean.invoiceDate}" /> <span
class="calendar"><img
th:src="#{/resources/images/calendar.svg}" /></span>
</div>
<div class="txtChallan">
<lable class="lable">Challan number</lable>
<input type="text" class="inputfield" id="txtChallan"
th:field="*{salesBean.challanNumber}" />
</div>
<div class="txtChallDt calendar">
<lable class="lable">Date</lable>
<input type="date" class="inputfield" id="txtChallDt"
th:field="*{salesBean.challanDate}" /> <span
class="calendar"><img
th:src="#{/resources/images/calendar.svg}" /></span>
</div>
<div class="txtPO">
<lable class="lable">P. O. ID</lable>
<input type="text" class="inputfield" id="txtPO"
th:field="*{salesBean.purchaseOrderId}" />
</div>
<div class="txtPoDt calendar">
<lable class="lable">Date</lable>
<input type="date" class="inputfield" id="txtPoDt"
th:field="*{salesBean.purchaseOrderDate}" /> <span
class="calendar"><img
th:src="#{/resources/images/calendar.svg}" /></span>
</div>
</div>
<div id="tab2">
<div class="txtCash">
<lable class="lable">Cash</lable>
<input type="number" class="inputfield" id="txtCash"
th:field="*{paymentBean.cash}" />
</div>
</div>
</div>
<!-- tabcontents -->
</div>
<!-- blank -->
<!-- for autocomplete -->
<div class="ui-widget" id="autocomplete_desc">
<div class="tableArea">
<div class="tablePanel">
<div class="tableButtonBar">Material entry</div>
<section class="tableHolder">
<table id="invoicetable" class="transactionTable table"
cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Serial</th>
<th>Description</th>
<th>Nos.</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr
th:each="salesProduct, stat: *{salesProductFormBean.salesProducts}">
<td th:text="${stat.count}">1</td>
<td><input type="text"
**Line no: 290** th:field="*{salesProduct[__${stat.index}__].numbers}" /></td>
<td><select type="select" class="selectfield"
id="product"
th:field="*{salesProduct[__${stat.index}__].product.productId}">
<option value="Select"></option>
<option th:each="prdList : ${productList}"
th:value="${prdList.productId}"
th:text="${prdList.productName}"></option>
</select></td>
<td><input type="number"
th:field="*{salesProduct[__${stat.index}__].quantity}" /></td>
<td><input type="number"
th:field="*{salesProduct[__${stat.index}__].rate}" /></td>
<td><input type="number"
th:field="*{salesProduct[__${stat.index}__].amount}" /></td>
</tr>
</tbody>
</table>
</section>
</div>
<!-- tablePanel -->
</div>
<!-- tableArea -->
</div>
</div>
<!-- inputArea -->
</div>
<!-- mainArea -->
</div>
<!-- containerMain -->
</div>
<!-- /container -->
</div>
</form>
Controller
#Autowired
private List<SalesProduct> salesProducts= new ArrayList<SalesProduct>();
#ModelAttribute("salesProducts")
public List<SalesProduct> salesProducts() {
return salesProducts;
}
#RequestMapping(value= "/sales", method = RequestMethod.GET)
public String salesInvoicePage(final ModelMap model) {
String userName = LoginController.getPrincipal();
model.addAttribute("user", userName);
model.addAttribute("salesBean", new Sales());
model.addAttribute("paymentBean", new Payment());
SalesProductForm salesProductForm = new SalesProductForm();
SalesProduct salesProduct= new SalesProduct();
salesProducts.add(salesProduct);
salesProductForm.setSalesProducts(salesProducts);
model.addAttribute("salesProductFormBean", salesProductForm);
//model.addAttribute("salesProducts", salesProducts);
List<Product> productList= productService.list();
model.addAttribute("productList", productList);
return "sales";
}
Model
public class SalesProduct implements java.io.Serializable {
private Integer salesProductId;
private Product product;
private UserDetail userDetailByModifiedBy;
private UserDetail userDetailByCreatedBy;
private Date createdDate;
private Date modifiedDate;
private String numbers;
private Float quantity;
private Float rate;
private Float amount;
private Set<Sales> saleses = new HashSet<Sales>(0);
//Setter and Getters
}
public class SalesProductForm {
private List<SalesProduct> salesProducts;
public List<SalesProduct> getSalesProducts() {
return salesProducts;
}
public void setSalesProducts(List<SalesProduct> salesProducts) {
this.salesProducts = salesProducts;
}
}
I got stuck in this issue but dont know what am I missing. Does anyone knows what am I doing wrong?