Spring + Thymeleaf not able to populate String on render - spring

I have a testt.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Advanced Test</title>
</head>
<body>
<form action="#" th:action="#{getClasses}" method="GET">
<br />
<br />
<p style="margin-left: 35px">Submit fully classified package names</p>
Class Name: <input type="text" name="class_name" size="90px"></input>
<input type="text" name="classes" size="90px" th:field="${foo}"></input>
<input type="submit" value="Submit" ></input> <br />
</form>
</body>
</html>
And have the following code in the controller method:
model.addAttribute("foo", "foo");
return "testt";
Why "foo" is not populating in the html? If instead of String i add an object and try to get its variable it works fine.

i think if you want use it like this you should use th:value instead of th:field

You need this th:field=__${foo}__,
have a look at the doc here:http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

Related

SpringBoot - I tried to pass parameters from a view to controller, and I tried to display result in another view, but it doesn't work

I tried to build a form in home.jsp
<form method="POST" action="uploadfile" th:action="#{/uploadfile}" enctype="multipart/form-data">
<input type="file" name="file" accept=".xls"/> <br/><br/>
<label for="fname">order address:</label>
<input type="text" id="address" name="address" size="50">
<label for="lname">order account:</label>
<input type="text" id="account" name="account" size="50"><br/><br/>
<label for="lname">:</label>
<button type="submit">summit/button>
</form>
result.jsp
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/style.css" rel="stylesheet">
<meta charset="UTF-8">
<title>result</title>
</head>
<body>
<div th:if="${message}">
<h2 th:text="${message}"/></div>
<form action="/download" method="post">
<text name="filename" type="text" value="${downloadfile}"/><br/>
<input type="submit" value="download XML" />
</form>
</body>
</html>
here is my controller
#PostMapping("/uploadfile")
public ModelAndView uploadFile(#RequestParam("file") MultipartFile file,
#RequestParam(name="address", required = false) String myaddress,
#RequestParam(name="account", required = false) String myaccount
)
{
....................
..................
ModelAndView model = new ModelAndView("result"); //tried to return this parameters
model.addObject("excecontentslist",tempExcelcontentList); //tried to show the contents of Excel
model.addObject("message",consequencemsg);//tried to show the message we have
model.addObject("downloadfile",xmlfilename); //tried to show the xml which is gonna download
return model;//got 404 error when all things has been done
}
all I trying to do was to send datas which is model to result.jsp to show the data out there,but it doesn't work,just showed the 404 error ,any idea?

java.lang.ClassNotFoundException: org.unbescape.uri.UriEscape

I get this error when ever I try to load this web page:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}"/>
<title>Competition</title>
</head>
<body>
<div>
<p th:text="'Name: ' + ${competition.name}" />
<p th:text="'Date: ' + ${competition.date}" />
<p th:text="'Venue: ' + ${competition.Venue}" />
<div th:if="${competition.competitors != null}">
<h3>Competitors</h3>
<ul>
<li th:each="item : ${competition.competitors}" th:text="${item}"></li>
</ul>
</div>
<h4>Add Competitor.</h4>
<form action="#" th:action="#{/competitions/{id}(id=${competition.id})}" th:object="${email}" method="post">
<p>User email: <input type="text" th:field="*{text}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</div>
<p th:text="${competition.id}"></p>
</body>
</html>
I added the org.unbescape dependency to my pom.xml.
I started getting this error when I added the the URL to the form
(This line:)
th:action="#{/competitions/{id}(id=${competition.id})}"
It looks like you are using a older version of org.unbescape. The class UriEscape was introduced in versin 1.1.0. Ref here
Can you try by upgrading the org.unbescape version to 1.1.1 as follows?
<dependency>
<groupId>org.unbescape</groupId>
<artifactId>unbescape</artifactId>
<version>1.1.1.RELEASE</version>
</dependency>

Not able to load partial templates using Thymleaf

I have templates/header.html with following code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div class="testing" th:fragment="header">
2016 Header
</div>
</body>
</html>
I have templates/index.html with following code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:insert="header :: header"></div>
<h3>User Registration</h3>
<form action="/AddUser" method="post">
<input type="text" name="fname" id="lname" placeholder="Firstname"
required /> <input type="text" name="lname" id="fname"
placeholder="Lastname" required />
<button type="submit">Insert</button>
</form>
</body>
</html>
I am expecting 2016 Header in index.html. But, nothing is getting displayed.
I am using following configuration in my gradle dependencies
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
Please tell me where i am going wrong.

Passing bean field to th:field in Thymeleaf fragment

I'm trying to refactor our Thymeleaf code that have a lot of copy-paste. The general idea is we have something like this:
<form th:object="${createForm}">
<div><input type="text" th:field="*{first}"/> <!-- some boilerplate code --></div>
<div><input type="text" th:field="*{second}"/> <!-- some boilerplate code --></div>
<div><input type="text" th:field="*{third}"/> <!-- some boilerplate code --></div>
<div><input type="text" th:field="*{fourth}"/> <!-- some boilerplate code --></div>
</form>
and I want to refactor the fragment
<input type="text" th:field="*{first}"/> <!-- some boilerplate code -->
to a separate file as it is a lot of copy paste (there is quite some HTML in the boilerplate code section).
My first approach was to do something like this:
<form th:object="${createForm}">
<div th:replace="fragments/input :: input(*{first}" />
<div th:replace="fragments/input :: input(*{second}" />
<div th:replace="fragments/input :: input(*{third}" />
<div th:replace="fragments/input :: input(*{fourth}" />
</form>
and then have a fragments/input.html file
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div th:fragment="input(field)">
<input th:field="${field}"/> <!-- some boilerplate code -->
</div>
</body>
</html>
But, once compiled/deployed, I get error
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'field' available as request attribute
Anyone an idea how to solve this? The question is to reduce code copy-paste while retaining the benefit of having th:field.
I also tried use th:with like this
<div th:width="field=*{first}" th:replace="fragments/smallslider :: input()" />
and fragment
<div th:fragment="input()">
<input th:field="${field}"/> <!-- some boilerplate code -->
</div>
but that did neither produce error nor generate HTML.
I solved this in similar way as #Wilson did.
Fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
<div th:fragment="input(fieldName)">
<input th:field="*{__${fieldName}__}" type="text">
</div>
</body>
</html>
Calling:
<form th:object="${createForm}">
<div th:replace="fragments/input :: input('first')" />
<div th:replace="fragments/input :: input('second')" />
<div th:replace="fragments/input :: input('third')" />
<div th:replace="fragments/input :: input('fourth')" />
</form>
you can achive this by passing the name of your bean field to the fragment like so.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div th:fragment="input(fieldName, fieldValue)">
<input th:name="${fieldName}" th:value=${fieldValue}/> <!-- some boilerplate code -->
</div>
</body>
</html>
and call it like so
<form th:object="${createForm}">
<div th:replace="fragments/input :: input('field', *{field})" />
</form>

Why won't this XHTML form validate?

Any ideas why this won't validate here:
http://validator.w3.org/#validate_by_input
It seems the form input tags are wrong but reading through the XHTML spec they should validate fine. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Try putting a fieldset tag around the inputs. I think the idea of forms in XHTML is that they can't have direct descendants that aren't div, fieldset, etc.
You need to move
<div class="Controls">
so that it's inside the <form tag
This validates nicely
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
As someone else put it:
[quote]
The validator is telling you that your hidden input element cannot immediately follow the form tag - it needs to have a container element of some kind.
[/quote]
(Source)
I guess a fieldset could help; See The XHTML DTD:
<!ELEMENT form %form.content;>
<!ENTITY % form.content "(%block; | %misc;)*">
<!ENTITY % misc "noscript | %misc.inline;">
<!ENTITY % misc.inline "ins | del | script">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">
No input for you :(
I had the very same problem and it took me some time to figure out. Is this a recent change with the w3c validator? it's just I'm sure some of my pages with forms validated in the past, but now they all seem to through up errors for the same problem.
I used to always do something like:
<div>
<form>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</form>
and get validation errors, so now I just add fieldset or div around all the labels and inputs to get it to validate, like this:
<div>
<form>
<fieldset>or<div>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</fieldset>or</div>
</form>
Seems to work, but I'm sure I didn't have to do this in the past... hmmm?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
Put your div inside your form.
Your input elements should be within a fieldset. This validates and has the added benefit of making the document more accessible to non-visual user agents.
As an aside, your markup is suffering from divitis a bit. You could put classes on the table cells directly rather than nesting div elements within them (I'm not going to comment on the use of tables for layout). Also, you could style the form element directly rather than nesting it within a div.
Anyway, here's your example with a fieldset added so it validates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<fieldset>
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</fieldset>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

Resources