I'm trying to handle a form submission with thymeleaf in my spring-boot application, i integrated
this example which worked fine on my app. I'm trying to change it a little bit, but this is what i'm getting as an exception:
org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'recruiter' cannot be found on null
at org.springframework.expression.spel.ast.PropertyOrFieldReference.readProperty(PropertyOrFieldReference.java:213) ~[spring-expression-5.2.3.RELEASE.jar:5.2.3.RELEASE]
...
This is the object i'm trying to handle with thymeleaf
public class FormRec {
private String recruiter;
public String getRecruiter() {
return recruiter;
}
public void setRecruiter(String recruiter) {
this.recruiter = recruiter;
}
}
This is my Controller
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;
import com.service.minimicroservice.objects.FormRec;
#Controller
public class MyController {
#GetMapping("/form")
public String greetingForm(Model model) {
model.addAttribute("recForm", new FormRec());
return "form";
}
#PostMapping("/form")
public String greetingSubmit(#ModelAttribute FormRec rec) {
return "result";
}
}
result.html
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Result</h1>
<p th:text="'Recruiter: ' + ${rec.recruiter}" />
Submit another message
</body>
</html>
part of the form.html
<body>
<form action="#" th:action="#{/form}" th:object="${recForm}" method="post">
<div class="form-row m-b-55">
<div class="name">Recruiter<br> Name</div>
<div class="value">
<div class="row row-space">
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="first_name" th:field="*{recruiter}">
<label class="label--desc">Full Name</label>
</div>
</div>
...
In order to refer to a FormRec Object i use recForm as th:object in the form.html and rec to refer to it in the result.html.
Note: I pass a value to the th:field="*{recruiter}" input text when i submit the form (is not null)
You have to name the ModelAttribute rec that the data gets bound to. So in your controller method do this (notice the name = "rec"):
public String greetingSubmit(#ModelAttribute(name = "rec") FormRec rec) {
...
}
It should work.
Additional explanation:
I've had a closer look at why that happens and it's because Spring's ModelAttribute annotation by default infers from the name of the type and not the name of the parameter (the example link you provided says it's method parameter name, but it seems to be wrong).
So in this case Spring sends formRec (notice the camelCase, which it expects when the class name is called FormRec) to the result.html and not rec as you would expect.
If my explanation doesn't really make sense, then this is the Spring documentation on ModelAttribute:
The default model attribute name is inferred from the declared attribute type (i.e. the method parameter type or method return type), based on the non-qualified class name: e.g. "orderAddress" for class "mypackage.OrderAddress", or "orderAddressList" for "List".
Related
I have just began to work with Html + springboot. I have prepared two files
the HTML file with a form as bellow
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Add Info</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Insert an Info:</h1>
<!--
In Thymeleaf the equivalent of
JSP's ${pageContext.request.contextPath}/edit.html
would be #{/edit.html}
-->
<form th:action="#{}" method="post">
<input type="text" th:name="Coord1"/> </br>
<input type="text" th:name="Coord2"/> </br>
<input type="text" th:name="Coord3"/> </br>
<input type="text" th:name="Coord4"/> </br>
<input type="submit"/>
</form>
<br/>
<!-- Check if errorMessage is not null and not empty -->
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
...
</div>
</body>
</html>
I want to get the four values coord1 coord2, coord3 and coord4. My java controller file contains the lines
package com.example.project.controller;
import java.io.IOException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
#Controller
public class MainController {
#RequestMapping(value="",method=RequestMethod.GET)
public void addAObjectForm(#RequestParam("Coord1") String Coord1,#RequestParam("Coord2") String Coord2,#RequestParam("Coord3") String Coord3, #RequestParam("Coord4")String Coord4) throws IOException {
System.out.println(Coord1);
}
}I
When I run this code I get the error
[2m2021-07-12 22:28:57.206[0;39m [33m WARN[0;39m [35m18812[0;39m [2m---[0;39m [2m[nio-8080-exec-3][0;39m [36m.w.s.m.s.DefaultHandlerExceptionResolver[0;39m [2m:[0;39m Resolved [org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'Coord1' for method parameter type String is not present]
Could anyone help me please
you use POST action in your form, and u use GET method in your controller. match those things and update status please :)
Firstly add thymeleaf dependency in your pom.xml.
Give some action inside the:action like
<form th:action="#{detail}" method="post">
Use make controller like
#Controller
public class MainController {
#GetMapping("/")
public String show() {
return "show"; // I had given name to view part as show.html
}
#RequestMapping(value = "/detail", method = RequestMethod.POST)
public void addAObjectForm(#RequestParam(value = "Coord1", required = false) String Coord1,
#RequestParam(value = "Coord2", required = false) String Coord2,
#RequestParam(value = "Coord3", required = false) String Coord3,
#RequestParam(value = "Coord4", required = false) String Coord4) throws IOException {
System.out.println(Coord1);
}
}
i'm new in Spring and i trying to learn it with help Spring in action 5 (Craig Walls).I'm creating small Spring Boot MVC-application.Now i have a little problem with Thymeleaf.
I have Controller,View and model as POJO object.When i'm trying to get data from form Intellij Idea told me that something wrong with my Thymeleaf view in this line:
Model
import java.util.Date;
import java.util.List;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import lombok.Data;
#Data
public class Taco {
private Long id;
private Date createdAt;
#NotNull
#Size(min=5, message="Name must be at least 5 characters long")
private String name;
#Size(min=1, message="You must choose at least 1 ingredient")
private List<Ingredient> ingredients;
}
View
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Taco Cloud</title>
<link rel="stylesheet" th:href="#{/styles.css}"/>
</head>
<body>
<h1>Design your taco!</h1>
<img src="../static/images/TacoCloud.png" alt="TacoCloud.png" th:src="#{/images/TacoCloud.png}">
<form method="POST" th:object="${taco}">
<div class="grid">
<div class="ingredient-group" id="wraps">
<h3>Designate yor wrap:</h3>
<div th:each="ingredient:${wrap}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="proteins">
<h3>Pick your protein:</h3>
<div th:each="ingredient: ${protein}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span>
</div>
</div>
<div class="ingredient-group" id="cheeses">
<h3>Choose your cheese:</h3>
<div th:each="ingredient:${cheese}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="veggies">
<h3>Determine your veggies:</h3>
<div th:each="ingredient : ${veggies}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"
/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="sauces">
<h3>Select your sauce:</h3>
<div th:each="ingredient : ${sauce}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}"
/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
</div>
<div>
<h3>Name your taco creation:</h3>
<input type="text" name="name" th:field="*{name}"/>
<br/>
<button>Submit your taco</button>
</div>
</form>
</body>
</html>
Controller
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.Errors;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import tacos.Ingredient.Type;
import tacos.Ingredient;
import org.springframework.web.bind.annotation.ModelAttribute;
import tacos.Taco;
import tacos.data.IngredientRepository;
import javax.validation.Valid;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
#Slf4j
#Controller
#RequestMapping("/design")
public class DesignTacoController {
private final IngredientRepository ingredientRepo;
#Autowired
public DesignTacoController(IngredientRepository ingredientRepo){
this.ingredientRepo=ingredientRepo;
}
#GetMapping
public String showDesignForm(Model model) {
List<Ingredient> ingredients=new ArrayList<>();
ingredientRepo.findAll().forEach(i->ingredients.add(i));
Type[] types = Ingredient.Type.values();
for (Type type : types) {
model.addAttribute(type.toString().toLowerCase(),
filterByType(ingredients, type));
}
return "design";
}
private List<Ingredient> filterByType(
List<Ingredient> ingredients, Type type) {
return ingredients
.stream()
.filter(x -> x.getType().equals(type))
.collect(Collectors.toList());
}
#PostMapping
public String processDesign(#Valid #ModelAttribute("design") Taco design, Errors errors, Model model) {
if (errors.hasErrors()) {
return "design";
}
// Save the taco design...
// We'll do this in chapter 3
log.info("Processing design: " + design);
return "redirect:/orders/current";
}
}
And finally i get this error:
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/design.html]")
Caused by: org.attoparser.ParseException: Error during execution of processor 'org.thymeleaf.spring5.processor.SpringInputGeneralFieldTagProcessor' (template: "design" - line 64, col 45)
I noticed two things on your code.
I don't see th:action on your form that is required for form submission.
change form method="POST" th:object="${taco}" to form method="POST" th:object="${design}"
Try fixing these two and it should work.
I encountered same issue.
Resolution for me was to add getters in Taco.java for name. Somehow lombok is not generating getters automatically at run time.
And th:object="${taco}" should be th:object="${design}"
No need to make changes for th:action. From tutorial
If you take another look at the tag in your view, you can see that its method attribute is set to POST. Moreover, the doesn’t declare an action attribute. This means that when the form is submitted, the browser will gather up all the data in the form and send it to the server in an HTTP POST request to the same path for which a GET request displayed the form—the /design path.
I found two thing in code:
I do not find any action your form in html. You should use th:action tag to add an action.
in html you used th:object="${taco}" for declare an object for your html form. But you do not add “taco” object in your model in controller method from where you return the html design. You should add the “taco” object in your controller method like below.
model.addAttribute(“taco”, taco Object);
I am using SpringBoot with Thymeleaf to build a trivial example to help me learn the two technologies.
I am basing my example on THIS GUIDE
The entity is a Greeting which has an Id and a Content.
I create the Greeting just fine, and I can list all the Greetings I've created.
I then wanted to add a delete option against each Greeting in the list page. When clicking delete, I want the object to be deleted and the list page served up again.
Alas, when I load the list page I get this error:
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'greeting' available as request attribute
Controller and respository objects
#Controller
public class GreetingController {
#Autowired
GreetingRepo gr;
#RequestMapping(value="/greeting/list", method=RequestMethod.GET)
public String greetingsForm(Model model) {
model.addAttribute("greetings", gr.findAll());
return "greeting/list";
}
#RequestMapping(value="/greeting/delete", method=RequestMethod.POST)
public String deleteGreeting(#ModelAttribute("greeting") Greeting greeting) {
gr.delete(greeting);
return "redirect:/greeting/list";
}
}
#RepositoryRestResource
interface GreetingRepo extends JpaRepository<Greeting, Long> {
}
List.html page:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Result</h1>
<div th:each="greeting : ${greetings}">
<p th:text="'id: ' + ${greeting.id}" />
<p th:text="'content: ' + ${greeting.content}" />
<form action="#" th:action="#{/greeting/delete}" th:object="${greeting}" method="post">
<input type="hidden" th:field="*{id}"/>
<input type="hidden" th:field="*{content}"/>
<input type="Submit" value="Delete"/>
</form>
</div>
Add another
Show All
</body>
</html>
Would appreciate a push in the right direction here :-)
I think you miss this line .
model.addAttribute("greeting", new Greeting());
#RequestMapping(value="/greeting/list", method=RequestMethod.GET)
public String greetingsForm(Model model) {
model.addAttribute("greeting", new Greeting());
model.addAttribute("greetings", gr.findAll());
return "greeting/list";
}
you dont have to use a form to delete the greeting you can do it very easily with this approach. hide the id of the greeting within the url. so you dont need to use a form and hidden tags. and annotate the controller method with following approach, to accept incoming id of the greeting.
replace the current form with given html code and replace the delete method in the controller as well.
<a th:href="#{/greeting/{id}/delete(id=${greeting.id})}" th:text="delete"></a>
#RequestMapping(value="/greeting/{id}/delete",method=RequestMethod.GET)
public String deleteGreeting(#PathVariable int id) {
gr.delete(id);
return "redirect:/greeting/list";
}
edit:- since you need the object to be present within the controller
you can use findOne method to fetch the object from the given id.check out the following example.
<a th:href="#{/greeting/{id}/edit(id=${greeting.id})}" th:text="edit"></a>
#RequestMapping(value="/greeting/{id}/edit",method=RequestMethod.GET)
public String Edit(#PathVariable int id){
greeting greetingob = gr.findOne(id);
return "edit";
}
I have server and I should make request on button pressed also I have to call this method and when it is works I should parse json but my doesn't see controller method only main method is available
How to call
<input type="submit" onclick="#routes.Login.resp()" value="LOGIN" >
because it is not worrking Cannot resolve symbol
GET /login controllers.Login.main()
My controller:
package controllers;
import play.libs.F;
import play.libs.WS;
import play.mvc.Controller;
import play.mvc.Result;
public class Login extends Controller {
public static Result main() {
return ok(views.html.login.render());
}
public static F.Promise<Result> resp() {
String feedUrl="http://validate.jsontest.com/?json=%7B%22key%22:%22value%22%7D";
final F.Promise<Result> resultPromise = WS.url(feedUrl).get().flatMap(
new F.Function<WS.Response, F.Promise<Result>>() {
public F.Promise<Result> apply(WS.Response response) {
return WS.url(response.asJson().findPath("empty").asText()).get().map(
new F.Function<WS.Response, Result>() {
public Result apply(WS.Response response) {
return ok("size" + response.asJson().findPath("count").asInt());
}
}
);
}
}
);
return resultPromise;
}
}
view:
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/stylelogin.css")">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,300,600,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->
</head>
<body>
<!-----start-main---->
<div class="main">
<div class="login-form">
<h1>Member Login</h1>
<div class="head">
<img src="#routes.Assets.at("images/user.png")" alt=""/>
</div>
<form>
<input type="text" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
<div class="submit">
<input type="submit" onclick="#routes.Login.main()" value="LOGIN" >
</div>
</form>
</div>
<!--//End-login-form-->
<!-----start-copyright---->
<!-----//end-copyright---->
</div>
<!-----//end-main---->
</body>
</html>
I am not sure if I also parse json properly,how to make proper GET,POST requests and parse it
As far as I know with the onclick attribute you always call a function in your JavaScript. If you want to specify an URL you need to put it into your form tag with an action attribute like <form action="#routes.Login.main()">.
The default for the HTML form tag is to send a GET. If you want to send a POST you have to specify it via an additional method="post" like <form action="#routes.Login.main()" method="post">. But then you have to change your routing too: POST /login controllers.Login.main(). If you want to post login data I'd strongly recommend to use POST because with GET your data including the password turns up in the query string of your URL.
Additionally your #routes.Login.main() method just returns the login view return ok(views.html.login.render());. Instead it should evaluate the form data you are sending.
I am developing a webapp. In that app i have a page which have three search options based on id. If the ID is wrong i want to retain the id in search textbox and i want to show an error message. I tried that with
ModelAndView.addObject("id", value);
And this is working fine , Now i want to know if there is a better way to do this because assume i have a big form and i want to retain the value of every field than it will be difficult using the above approch. Please help!
And i am using search by ID and Name both thats why i have try and catch blocks
this is my jsp file
html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap-responsive.min.css" />
<script>
function redirectToSearchResult(textBoxId){
window.location.href= document.getElementById(textBoxId).name+'.htm?'+'id='+document.getElementById(textBoxId).value;
}
</script>
</head>
<body>
<div class="page-header"></div>
<div id="searchByBuyer">
<label id="E_B_I"><h2>Buyer Search<h2></label><br>
<input type="text" id="S_B_B" class="text-box" name="searchByBuyer" value=${buyerId} ></input>
<input type="button" id="BuyerSearch" class="btn-custom" value="search" onclick="redirectToSearchResult('S_B_B')"/>
</div>
<div id="searchByCategory">
<label id="E_C_I"><h2>Category Search<h2></label><br>
<input type="text" id="S_B_C" class="text-box" name="searchByCategory" value=${categoryId} ></input>
<input type="button" id="CategorySearch" class="btn-custom" value="search" onclick="redirectToSearchResult('S_B_C')"/>
</div>
<div id="searchByArticle">
<label id="E_A_I"><h2>Article Search<h2></label><br>
<input type="text" id="S_B_I" class="text-box" name="searchByArticle" value=${articleId} ></input>
<input type="button" id="ArticleSearch" class="btn-custom" value="search" onclick="redirectToSearchResult('S_B_I')"/><br>
</div>
<br>
<label style="color:red; padding-left:45em; padding-top:15em"><h4>${error}</h4></label>
</body>
</html>
And this my controller
`
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
#Controller
public class BuyerController {
#Autowired
private BuyerRepo buyerRepo;
#RequestMapping(value = "/searchByBuyer.htm", method = RequestMethod.GET)
public ModelAndView searchFields(#RequestParam(value = "id") String buyerId) throws InvalidIdException {
Buyer buyer = null;
ModelAndView buyerSearch = new ModelAndView("buyerSearch");
ModelAndView errorView = ErrorView.getErrorView("buyerId", buyerId, "Enter a valid Buyer id!");
try {
buyer = buyerRepo.getBuyer(Long.parseLong(buyerId));
} catch (NumberFormatException e) {
buyer = buyerRepo.getBuyer(buyerId);
if (buyer == null) return errorView;
} catch (Exception e) {
buyerSearch = errorView;
}
buyerSearch.addObject("buyer", buyer);
return buyerSearch;
}
}
`
This is the error and view class to create error view with parameters
`
import org.springframework.web.servlet.ModelAndView;
public class ErrorView {
public static ModelAndView getErrorView(String key, String value, String message) {
ModelAndView errorView = new ModelAndView("index");
errorView.addObject("error", message);
errorView.addObject(key, value);
return errorView;
}
}
`
Spring has JSR 303-Bean-Validation support for web forms.
This build in way is much easyer to use than some own implementation.
You need:
a command object that gets all the values from the form. Each fields can have JSR 303-Bean-Validation annotations to indicate the constaints you want to enforce
you need a web controller method with (at least) two parameters: #Valid command object, BindingResult (The BindingResult must be THE parameter after the command object)
in you web controller method you need to check the BindingResult, and if it has failure you need to render the form again
in your form you need to use form:errors to show the errors (form:errors can also show the errors for an specific field)
you need some spring configuration: <mvc:annotation-driven /> (there is more possible but this should be enough for the begin)
you need a JSR 303-Bean-Validation libary, for example: Hibernate Validator (this is not the Hibernate ORM)
But an example explain it the best: http://www.mkyong.com/spring-mvc/spring-3-mvc-and-jsr303-valid-example/