I'm having trouble putting a button into the element of the list based on Thymeleaf. I would like to have a button next to element of the list.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html}">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<section layout:fragment="" content="">
<div class="row">
<div class="col-2">
<a th:href="#{/archives}">archiwum zadań</a>
</div>
<div class="col-2">
<a th:href="#{/add}">dodawanie zadania</a>
</div>
</div>
<ul>
<li th:each="task: ${tasks}"
th:text="|${task.getId()} ${task.getName()} ${task.getCategory().getDescription()} ${task.isFinished()}|">
<input type="submit" value="Done">
</li>
</ul>
</section>
</body>
</html>
Thymeleaf will replace any pre-existing tag content with whatever is generated by the th:text expression.
In your case that pre-existing content is your <input> element - which is why the buttons are not displayed.
One way to avoid this is to place your th:text into a span inside the <li>:
<ul>
<li th:each="task: ${tasks}">
<span th:text="|${task.id} ${task.name} ... |"></span>
<input type="submit" value="Done">
</li>
</ul>
(I removed a couple of your fields from my example, for brevity).
Note also in my case, I have changed ${task.getId} to ${task.id}. As long as you have appropriately named getters (as per the JavaBeans naming convention) you can use the field name - and Thymeleaf will find the correct getter to call.
Related
I have a Spring Boot Web MVC application where I'm using a Bootstrap 4 template and Thymeleaf as view.
I'm facing a problem where a drop-down navigation item is rendering without styles and scripts when the containing page is mapped in the controller under more than one path segment. If the path consists only of one segment the component works as intended.
Page containing the component "menu.html"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Menu</title>
<!-- Custom fonts for this template -->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link href="/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<ul class="navbar-nav ml-auto">
<!-- Drop-Down Component -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${user.getName()}"></span>
<img class="img-profile rounded-circle" src="img/undraw_profile.svg" width="50" height="50">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="logoutModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="/login?logout=true">Logout</a>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/datatables-demo.js"></script>
</body>
</html>
Using the following mapping in my controller the component works fine:
#GetMapping(value = "/first-segment")
public String showModal(Model model) {
model.addAttribute("user", userService.getAuthenticatedUser());
return "menu";
}
But if I add a second segment no styling is displayed and the component can't be clicked on:
#GetMapping(value = "/first-segment/second-segment")
public String showModal(Model model) {
model.addAttribute("user", userService.getAuthenticatedUser());
return "menu";
}
Note
I'd also like to add that not all Bootstrap components don't render correctly under two path segments. As far as I've noticed only drop-down and modal components share this issue.
Replace:
<script src="vendor/jquery/jquery.min.js"></script>
with:
<script src="/vendor/jquery/jquery.min.js"></script>
Note the extra slash at the start. Otherwise, the Javascript file is supposed to be relative to the current file. That is why it worked for the first segment, but not the second segment.
By starting with a slash, it is always relative to the root of the path.
i have a problem with Spring Boot Thymeleaf. I want to include a simple html-file in another html file with Thymeleaf.
Here my main.html file:
In the middle of the codesnippet you can see the root-div, here i want to include the dashboard.html file.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Admin-Area</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/backend/webjars/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/backend/webjars/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 fixed-top mainnav navbar-expand-xl">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="../dashboard/dashboard.html">B2C-Shop</a>
<button type="button" class="navbar-toggler navbar-toggler-right">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div th:each="script: ${scripts}">
<div th:if="${script.endsWith('dashboard.html')}">
<div id="root" th:include="dashboard :: dashboard></div>
</div>
</div>
</main>
</div>
</div>
<script src="/backend/webjars/es5-shim/4.5.9/es5-shim.min.js"></script>
<script src="/backend/webjars/es6-shim/0.20.2/es6-shim.min.js"></script>
<script src="/backend/webjars/jquery/3.3.1/jquery.min.js"></script>
<script src="/backend/webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="/backend/webjars/modernizr/2.8.3/modernizr.min.js"></script>
<div th:each="script: ${scripts}">
<div th:if="${script.endsWith('.js')}">
<script type="text/javascript" th:src="'/backend/js' + ${script}"></script>
</div>
</div>
</body>
</html>
And this is the dashboard.html file which i want to include in the main.html file.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="dashboard">
<h1>Welcome to B2C-Admin-Area</h1>
</div>
</html>
This is my DashboardController.java which i declare the dashboarb/dashboard.html file
The return methode "getTemplate()" references to backend folder in resources folder.
/**
*
* Render dash board
*
* #param model the attribute model
* #return the template file name
*/
#RequestMapping(value = "/backend/dashboard/dashboard.html", method = RequestMethod.GET)
public String dashboard(final Model model)
{
String[] script = {"/dashboard/dashboard.html"};
model.addAttribute(SCRIPT, script);
return getTemplate();
}
/**
* Gets the template file name.
*
* #return the template file name
*/
protected String getTemplate()
{
return "backend";
}
My folder stucture looks like this:
Do you have any idea to include this file?
Thank you.
Regards MWC.
First arrange your html files as shown in the below structure:
Then create fragment for import as :
suppose you saved below code in breadcrumb file in template/common folder:
<section class="content-header" th:fragment="breadcrumbfragment">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Next </li>
<li class="active">Next to Next</li>
</ol>
</section>
Now to import above fragment use following line:
<section class="content-header" th:replace="common/breadcrumb::breadcrumbfragment"></section>
im 'developing' an application made using Spring Boot, i am not so sure how to manage templates.
I've tought two ways to do this:
Using custom tags and returning the value of the HTML/JSP file as a String and use it
Something like this
<th:header></th:header>
<!-- This would be the header (The implementation of this tag in Java) -->
<body>
Things that are not common
<th:footer></th:footer>
<!-- This would be the footer -->
</body>
The other way could be using includes, but im not so sure how to do it...
Not sure if theres another way of doing this using Spring. Hope that you could understand me.
Thanks you before hand :·).
You could use Thymeleaf. Then you can use
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />
<body>
<div th:replace="common/navbar :: common-navbar" />
<your content here>
</body
</html>
Then you would have the common-header and common-navbar thymeleaf fragments in separate files like so (note the th:fragment in the common files. Also note that these files are under a common folder):
<head th:fragment="common-header">
<title>DevOps Buddy</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<!-- Custom styles for this template -->
<link type="text/css" th:href="#{/css/styles.css}" rel="stylesheet" media="screen"/>
And so
<div th:fragment="common-navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a th:text="#{navbar.home.text}" href="/"></a></li>
<li><a th:text="#{navbar.about.text}" href="/about"></a></li>
<li><a th:text="#{navbar.contact.text}" href="/contact"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a th:href="#{/login}" th:text="#{navbar.login.text}" />
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<form id="f" th:action="#{/logout}" method="post" role="form" class="navbar-form">
<button type="submit" th:text="#{navbar.logout.text}" class="btn btn-primary" />
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
I want to validate the JSP in the JSP itself but it is givin me a nullpointer Exception..My code is given below...
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Login Form</title>
<link rel="stylesheet" href="admincss/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<%
String username=request.getParameter("txt_username");
String password=request.getParameter("txt_password");
if(username.equals("k") && password.equals("k"))
{
response.sendRedirect("Admin");
}
%>
<section class="container">
<div class="login">
<h1>Login to Web App</h1>
<form method="post" action="admin.jsp">
<p><input type="text" name="txt_username" value="" placeholder="Username or Email"></p>
<p><input type="password" name="txt_password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="btn_commit" value="Login"></p>
</form>
</div>
<div class="login-help">
<p>Forgot your password? Click here to reset it.</p>
</div>
</section>
<section class="about">
<p class="about-links">
View Article
Download
</p>
<p class="about-author">
© 2012–2013 Thibaut Courouble -
MIT License<br>
Original PSD by Orman Clark
</section>
</body>
</html>
I don't understand the error.....If this is not the right method please suggest me the right one
NullPointerException generally means you tried to call a method or access a field on a variable doesn't refer to any object. The only variables you're using in this file, aside from the predefined request and response, are username and password.
The request.getParameter method returns null if the request doesn't have a parameter with the specified name. So if your request doesn't include a txt_username and/or txt_password parameter, the username and/or password variable will be null.
On the line below, when you call username.equals and password.equals, you'll get the exception if those variables are null. You can't call the method if there's no object to call it on.
You need to add some code to handle the case where username or password are null.
I am trying to extract the specific content in html using Jsoup. Below is the sample html content.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body class="">
<div class="shop-section line bmargin10 tmargin10">
<div class="price-section fksk-price-section unit">
<div class="price-table">
<div class="line" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<div class="price-save">
<span class="label-td"><span class="label fksk-label">Price :</span></span>
</div>
<span class="price final-price our fksk-our" id="fk-mprod-our-id">Rs.<span class="small-font"> </span>11990</span>
</div>
<meta itemprop="price" content="Rs. 11990" />
<meta itemprop="priceCurrency" content="INR" />
<div class="our-price-desc fksk-our-price-desc">
<small>(Prices are inclusive of all taxes)</small>
</div>
</div>
</div>
</div>
</body>
</html>
I got the required output using below command:
document.select(".price-table").select(".line").select("span").get(2).text()
Looks like its lengthy.
Can't i able to directly get using span class ("price final-price our fksk-our")?
Any help regarding the same?
Does this not work for you? Not sure why you're arbitrarily starting at price-table.
doc.select("span[class=price final-price our fksk-our]").text();
If not, it should be pretty close. Look at JSoup's selector syntax; it is very powerful.