Develop Reference

How to trigger Spring boot form submission by clicking on an li element?

I have a side bar for my user profile page which has two items for 1) Updating the information and 2) showing the reviews that the user has already written.
The first item works perfectly (as it includes a form and has a submit button). But for the second one, I have no idea. The goal is that when I click on My Reviews, a method from the controller class is called, the reviews of the user are extracted from the database and the results are shown on the right side of the page.
As I don't have a submit button or a form for the second item, I don't know how I can implement it.
Here is my code:
<div class="module-inner">
<div class="side-bar">
<nav class="side-menu">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#profile">Profile</li>
<li class="active"><a data-toggle="pill" href="#review">My
Reviews</a></li>
</ul>
</div>
</nav>
</div>
<div class="content-panel">
<div class="col-xs-9">
<div class="tab-content">
<div id="profile" class="tab-pane fade">
<form class="form-horizontal" th:action="#{/edit_profile}"> <fieldset class="fieldset">
<h3 class="fieldset-title">Personal Info</h3>
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">User
Name</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<input type="text" class="form-control"
th:disabled="${currentUser.email}"
th:value="${currentUser.email}">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">First
Name</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<input name="firstname" type="text" class="form-control"
th:value="${currentUser.firstname}">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">Last
Name</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<input name="lastname" type="text" class="form-control"
th:value="${currentUser.lastname}">
</div>
</div>
</fieldset>
<hr>
<div class="form-group">
<div
class="col-md-10 col-sm-9 col-xs-12 col-md-push-2 col-sm-push-3 col-xs-push-0">
<input class="btn btn-primary" type="submit"
value="Update Profile">
</div>
</div>
</form>
</div>
<div id="review" class="tab-pane fade">
<h3>Menu 2</h3>
<p>You have no reviews yet.</p>
</div>
</div>
</div>
</div>
</div>
Here is my controller:
#RequestMapping(value = "/findUserReviews", method = RequestMethod.GET)
public ModelAndView findUserReviews() {
ModelAndView modelAndView = new ModelAndView();
Authentication auth = SecurityContextHolder.getContext().getAuthentication();
User user = userService.findUserByEmail(auth.getName());
..
modelAndView.addObject("reviews", reviewRepository.findUserRevies());
modelAndView.setViewName("profile");
return modelAndView;
}
I use the following technologies: Spring boot, Hibernate and Thymeleaf.
Any help would be appreciated.
Final update: The provided code in the accepted answer works, provided that I don't return a ModelAndView but a List<Review>.

With Ajax calls you can call the controller endpoints using javascript. One ajax call looks like this :
function getReviews() {
$.ajax({
type: "GET",
url: "/users/findUserReviews", //example
dataType: "JSON",
success: function (data) {
//do something with this JSON
fillReviews(data);
}
});
}
Now you can use this function as an on-click event for your button. And the fillReviews() is a function that gets the element with id="review" from the jsp page and create the list tree with the fetched data.
function fillReviews(data) {
var reviewDiv= document.getElementById('review');
var reviewList = document.createElement('ul');
for ( var i=0 ; i < data.length; i++)
{
var reviewListItem = createListItem(data[i]);
reviewList.appendChild(reviewListItem);
}
reviewDiv.appendChild(reviewList);
}
And createListItem(data[i]) could look like this:
function createListItem(data)
{
var listItem = document.createElement('li');
listItem.innerHTML = data["reviewName"]; // for example ..
return listItem;
}
And now all you have to do is to call getReviews() here :
<button onclick="getReviews()"/>
EDIT : The "data" from the ajax call is a JSON. So the "/users/findUserReviews" should return a List<Review> for example. And there is no need to change your original "/findUserReviews" endpoint. This was only an example, you can create a new endpoint in your controller which returns a list.

Dropdown menu for editing categories doesn't work

I'm making a simple blog using springframework. I'm trying to make Categories for my posts/articles. When I create articles, I have the option to choose a Category and it works fine. However, when I try to edit an Article, the drop-down menu for choosing a Category is not working. It's just and empty field with a 'down arrow' sidebad and nothing happens when I click on it
//ARTICLE EDIT--------------------------------------------------
#GetMapping("/article/edit/{id}")
#PreAuthorize("isAuthenticated()")
public String edit(#PathVariable Integer id, Model model)
{
if(!this.articleRepository.exists(id))
{
return "redirect:/";
}
Article article = this.articleRepository.findOne(id);
if(!isUserAuthorOrAdmin(article))
{
return "redirect:/article/"+id;
}
List<Category> categories = this.categoryRepository.findAll();
String tagString = article.getTags().stream().map(Tag::getName).collect(Collectors.joining(", "));
model.addAttribute("view", "article/edit");
model.addAttribute("article", article);
model.addAttribute("category", categories);
model.addAttribute("tags", tagString);
return "base-layout";
}
#PostMapping("/article/edit/{id}")
#PreAuthorize("isAuthenticated()")
public String editProcess(#PathVariable Integer id, ArticleBindingModel articleBindingModel)
{
if(!this.articleRepository.exists(id))
{
return "redirect:/";
}
Article article = this.articleRepository.findOne(id);
Category category = this.categoryRepository.findOne(articleBindingModel.getCategoryId());
HashSet<Tag> tags = this.findTagsFromString(articleBindingModel.getTagString());
if(!isUserAuthorOrAdmin(article))
{
return "redirect:/article/"+id;
}
article.setContent(articleBindingModel.getContent());
article.setTitle(articleBindingModel.getTitle());
article.setCategory(category);
article.setTags(tags);
this.articleRepository.saveAndFlush(article);
return "redirect:/article/" + article.getId();
}
The html file is:
<main>
<div class="container body-content span=8 offset=2">
<div class="well">
<form class="form-horizontal" th:action="#{/article/edit/{id}(id=${article.id})}" method="POST">
<fieldset>
<legend>Edit Post</legend>
<div class="form-group">
<label class="col-sm-4 control-label" for="article_title">Post Title</label>
<div class="col-sm-4 ">
<input type="text" class="form-control" id="article_title" placeholder="Post Title" name="title" th:value="${article.title}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="article_content">Content</label>
<div class="col-sm-6">
<textarea class="form-control" rows="6" id="article_content" name="content" th:field="${article.content}"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="article_tags">Tags</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="article_tags" placeholder="Tags" name="tagString" th:value="${tags}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="article_category">Category</label>
<div class="col-sm-6">
<select class="form-control" id="article_category" name="categoryId">
<option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.name}" th:selected="${category.id == article.category.id}">
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<a class="btn btn-default" th:href="#{/article/{id}(id = ${article.id})}">Cancel</a>
<input type="submit" class="btn btn-success" value="Edit"/>
</div>
</div>
</fieldset>
</form>
</div>
</div>

You should use model attributes' names inside ${}. There is a mismatch between model.addAttribute("category", categories); and th:each="category : ${categories}".
Change model attribute name to "categories" and it should be fine
model.addAttribute("categories", categories);

Spring Boot and Thymeleaf Error: Could not parse Exception

I am creating a TO-DO list using Spring Boot, Spring Data, Thymeleaf. Can anyone tell me if my syntax is correct. This is my first application using spring boot. I am getting this error org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "" (index)
This is the index.html
<div th:if test="${mode=='MODE_HOME'}">
<div class="container" id ="homeDiv">
<div class="jumbotron text-center">
<h1>Welcome to Tasks Manager</h1>
</div>
</div>
</div>
<div th:if test="${mode=='MODE_TASKS'}">
<div class="container text-center" id ="tasksDiv">
<h3>My Tasks</h3>
<hr/>
<div class="table-responsive">
<table class="table table-striped table-bordered text-left">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Date</th>
<th>Finished</th>
</tr>
</thead>
<tbody>
<tr th:each="task: ${tasks}">
<td th:text="${task.id}"></td>
<td th:text="${task.name}"></td>
<td th:text="${task.description}"></td>
<td th:text="${task.dateCreated}"></td>
<td th:text="${task.finished}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div th:if test="${mode=='MODE_NEW' || mode=='MODE_UPDATE'}">
<div class="container text-center">
<h3>Manage Task</h3>
<hr/>
<form class="form-horizontal" method="POST" action="save-task">
<input type="hidden" name="id" value="${task.id}"/>
<div class="form-group">
<label class="control-label col-md-3">Name</label>
<div class="col-md-7">
<input type="text" class="form-control" name="name" placeholder="name" value="${task.name}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Description</label>
<div class="col-md-7">
<input type="text" class="form-control" name="description" placeholder="name" value="${task.description}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Finished</label>
<div class="col-md-7">
<input type="radio" class="col-sm-1" name="finished" placeholder="finished" value="true"/>
<div class="col-sm">Yes</div>
<input type="radio" class="col-sm-1" name="finished" placeholder="finished" value="false"/>
<div class="col-sm">No</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save"/>
</div>
</div>
</form>
</div>
</div>
This is the MainController
#Controller
#RequestMapping("/")
public class MainController {
#Autowired
private TaskService taskService;
#RequestMapping(method = RequestMethod.GET)
public String home(Model model){
model.addAttribute("mode", "MODE_HOME");
return "index";
}
#RequestMapping(method = RequestMethod.GET, value = "/all-tasks")
public String allTasks(Model model){
model.addAttribute("tasks", taskService.findAll());
model.addAttribute("mode", "MODE_TASKS");
return "index";
}
#RequestMapping(method = RequestMethod.GET, value = "/new-task")
public String newTask(Model model){
//List<Task> taskList = taskService.findAll();
model.addAttribute("mode", "MODE_NEW");
return "index";
}
#RequestMapping(method = RequestMethod.GET, value = "/save-task")
#PostMapping("/save-task")
public String saveTask(#ModelAttribute Task task, Model model) {
taskService.save(task);
model.addAttribute("tasks", taskService.findAll());
model.addAttribute("mode", "MODE_TASKS");
return "index";
}
#RequestMapping(method = RequestMethod.GET, value = "/update-task")
public String updateTask(#RequestParam int id, Model model){
model.addAttribute("tasks", taskService.findTask(id));
model.addAttribute("mode", "MODE_UPDATE");
return "index";
}
#RequestMapping(method = RequestMethod.GET, value = "/delete-task")
public String deleteTask(#RequestParam (required = false) int id, Model model){
taskService.delete(id);
model.addAttribute("tasks", taskService.findAll());
model.addAttribute("mode", "MODE_TASKS");
return "index";
}
}

How to bind an input value in a list to a bean attribute with Spring

I need to bind an object with a list of objects as an attribute. It is a static list and it is created and partially filled in the Controller. It is displayed correctly in the view, however the value in the input field is not set when the form is sent to the controller. I did some research and found several similar questions, however none of the proposed solutions worked for me.
edit.jsp
<c:forEach items="${priceConfigurationForm.priceList}" var="price" varStatus="priceStatus">
<tr>
<td>
<spring:bind path="priceConfigurationForm.priceList[${priceStatus.index}].country">
${price.country}
<input type="hidden" name="<c:out value="${status.expression}"/>"
id="<c:out value="${status.expression}"/>"
value="<c:out value="${status.value}"/>"/>
</spring:bind>
</td>
<td>
<spring:bind path="priceConfigurationForm.priceList[${priceStatus.index}].amount">
<input type="text" name="price" value="${price.amount}"/>
<input type="hidden"
name="<c:out value="${status.expression}"/>"
id="<c:out value="${status.expression}"/>"
value="<c:out value="${status.value}"/>"/>
</spring:bind>
</td>
<td>
<spring:bind path="priceConfigurationForm.priceList[${priceStatus.index}].currency">
${price.currency}
<input type="hidden" name="<c:out value="${status.expression}"/>"
id="<c:out value="${status.expression}"/>"
value="<c:out value="${status.value}"/>"/>
</spring:bind>
</td>
</tr>
</c:forEach>
Abstract from Controller populating the list:
#RequestMapping(value = "/price/create", method = RequestMethod.GET)
public String toCreatePriceConfiguratioView(Model model) {
log.info("::createPriceConfiguration: {}");
final PriceConfigurationForm priceConfigurationForm = new PriceConfigurationForm();
final List<PriceConfigurationForm.Price> prices = new ArrayList<>();
for (Country country : Country.values()) {
PriceConfigurationForm.Price price = new PriceConfigurationForm.Price();
price.setAmount(100);
price.setCountry(country.getCountryCode());
price.setCurrency(country.getCurrency());
prices.add(price);
}
priceConfigurationForm.setPriceList(prices);
model.addAttribute("priceConfigurationForm", priceConfigurationForm);
return "/secured/sources/onboarding/price/edit";
}
Abstract from Controller for storing the list:
#RequestMapping(value = "/price/create", method = RequestMethod.POST)
public String createPriceConfiguration(Model model, #ModelAttribute("priceConfigurationForm") #Valid PriceConfigurationForm priceConfigurationForm, BindingResult bindingResult, RedirectAttributes attributes) {
log.info("::createPriceConfiguration {}", priceConfigurationForm);
// TODO: Validate, before create
/* transform form to domain object */
PriceConfiguration configuration = PriceConfigurationForm.toPriceConfiguration(priceConfigurationForm);
onboardingApi.createPriceConfiguration(configuration);
attributes.addFlashAttribute("message", success("price configuration saved", priceConfigurationForm.getName()));
return "/secured/sources/onboarding/price/index";
}
Object:
#Data
public class PriceConfigurationForm {
private String name;
private String description;
private List<Price> priceList;
private Map<String, Long> countryToPriceMap;
public static PriceConfiguration toPriceConfiguration(PriceConfigurationForm form) {
final PriceConfiguration pc = new PriceConfiguration();
pc.setName(form.getName());
pc.setDescription(form.getDescription());
final Map<String, Long> prices = form.getPriceList().stream().collect(toMap(Price::getCountry, Price::getAmount));
pc.setCountryToPriceMap(prices);
return pc;
}
#Data
public static class Price {
private String country;
private long amount;
private String currency;
}
}

This is example of how I sucessfully parsed nested objects in one project :
<c:forEach var="block" items="${newplaceform.blocks}" varStatus="counter">
<fieldset data-block-order="${counter.index}" data-block-index="${counter.index}">
<c:if test='${block.type=="quizSingleAnswer"}'>
<legend><s:message code='blocks.type.quizSingleAnswer'/> <a class="glyphicon glyphicon-move move-block pull-right" href="#"></a><a data-remove="block" class="glyphicon glyphicon-remove pull-right" href="#"></a><a data-reordering="up" class="glyphicon glyphicon-chevron-up pull-right" href="#"></a><a data-reordering="down" class="glyphicon glyphicon-chevron-down pull-right" href="#"></a></legend>
<div class="form-group production-hide">
<label class="col-sm-3 control-label">id:</label>
<div class="col-sm-9"><input type="text" name="blocks[${counter.index}].id" value="${block.id}" data-row="blockId" data-disabled class="form-control"/></div>
</div>
<div class="form-group production-hide">
<label class="col-sm-3 control-label">type:</label>
<div class="col-sm-9"><input type="text" name="blocks[${counter.index}].type" value="${block.type}" data-disabled class="form-control"/></div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><s:message code='blocks.description'/>:</label>
<div class="col-sm-9"><textarea class="form-control" name="blocks[${counter.index}].description" data-description rows="3">${block.description}</textarea></div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-6 control-label">
<label class="inner-header"><s:message code='blocks.answers'/>:</label>
</div>
<div class="col-sm-6">
<div class="btn-group m-t-9">
<a class="btn btn-primary btn-xs" href="#" data-add-answer data-add-answer-block-index="${counter.index}"><i class="glyphicon glyphicon-plus"></i> <s:message code="blocks.add-answer" /></a>
</div>
</div>
</div>
</div>
<div class="row quiz-answers" data-count-answer="${block.answers.size()}">
<c:forEach var="answer" items="${block.answers}" varStatus="counterInner">
<div class="col-sm-6">
<fieldset>
<legend>
<div class="bootstrap-center">
<span><s:message code="blocks.answerNo"/> ${counterInner.index+1}</span>
<a data-remove="answer" class="glyphicon glyphicon-remove pull-right" href="#"></a>
</div>
</legend>
<div class="form-group production-hide">
<label class="col-sm-6 control-label">id:</label>
<div class="col-sm-6"><input type="text" name="blocks[${counter.index}].answers[${counterInner.index}].id" value="${answer.id}" data-row="answerId" data-disabled class="form-control"/></div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"><s:message code="blocks.answer"/>:</label>
<div class="col-sm-6"><input type="text" name="blocks[${counter.index}].answers[${counterInner.index}].text" value="${answer.text}" class="form-control"/></div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-6">
<div class="checkbox">
<label>
<input type="checkbox" name="blocks[${counter.index}].answers[${counterInner.index}].right" value="true" ${answer.checked()}/>
<s:message code="blocks.right"/>
</label>
</div>
</div>
</div>
</fieldset>
</div>
</c:forEach>
</div>

Edit value is not updated in Spring CRUD example

Here is my code.When I check checkbox and click the edit button the value is fetched correctly.But edited value is not updated in mysql database as well as table.I'm using jdbc template for this example."location" field is select option value.
controller get the checkbox value and fetch data from database.after that the updated value is not shown in the table.
HomeController.java
#RequestMapping("/edit")
public String update(Model model,#RequestParam Map<String,String> req){
updateValue = new Integer(req.get("checkId"));
List<Users> users = userdao.getUpdateRecord(updateValue);
model.addAttribute("result",users);
return "formedit";
}
#RequestMapping("/saveUpdate")
public String saveUpdate(Model model,#RequestParam Map<String,String> req){
String name,storage,location,address;
name = req.get("name");
storage=req.get("storage");
location=req.get("location");
address = req.get("address");
int row = userdao.updateRecord(updateValue,name,storage,location,address);
String message = row+ "updated";
model.addAttribute("message", message);
result(model);
return "home";
}
UsersDAO doesn't get the update value from formedit page.
UsersDAO.java
public List<Users> getUpdateRecord(int updateValue){
System.out.println("update value"+updateValue);
String sql="select id,name,storage,location,address from customer where id="+updateValue;
return jdbc.query(sql,new UsersMapper());
}
public int updateRecord(int id,String name,String storage,String location,String address){
return jdbc.update("update customer set name = ?,storage = ?,location = ?,address=? where id = ?",id,name,storage,location,address);
formedit.jsp
<form role="form" action="saveUpdate" method="post" class="form-horizontal">
<c:forEach var="row" items="${result}">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-xs-4 text">Customer Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="name" value=${row.name }>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4 text">Storage Location*</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="storage" value=${row.storage }>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-xs-4 text">Location</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="location" value=${row.location }>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4 text">Customer Address</label>
<div class="col-xs-8">
<textarea class="form-control" name="address">${row.address }</textarea>
</div>
</div>
</div>
<input type="submit" class="btn btn-success btn-md col-md-offset-6" value="Update">
</div>
</c:forEach>
</form>
}

Because this is wrong:
return jdbc.update("update customer set name = ?,storage = ?,location = ?,address=? where id = ?",id,name,storage,location,address);
The parameters order is incorrect, it doesnt find id with value address.