I'm using spring boot and mustache. I try to load page with static css, but styles doesn't load with page. Previous time when I had same problem I just put all static content in a static directory, but now it doesn't help me. Previous time I used Spring Security, but now don't. Don't think that this has any connection.
Here is my html:
<html>
<head>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script src="/js/script.js"></script>
</head>
<body>
<div>
<div class="table">
<form method="get" action="filter" class="table">
<input type="text" name="caller" placeholder="Caller"/>
<input type="text" name="destination" placeholder="Call recpient"/>
<input type="date" id="dateFrom" name="dateFrom">
<input type="date" id="dateTo" name="dateTo">
<input type="time" id="timeFrom" name="timeFrom">
<input type="time" id="timeTo" name="timeTo">
<button type="submit">Find</button>
</form>
</div>
</div>
<div>
<table class="table">
<thead>
{{#listOfCalls}}
<tr>
<th>{{name}}</th>
<th>{{caller}}</th>
<th>{{destination}}</th>
<th>{{date}}</th>
<th>{{timeFrom}}</th>
<th>{{timeTill}}</th>
<th>{{lengthOfCall}}</th>
</tr>
{{/listOfCalls}}
</thead>
</table>
</div>
</body>
</html>
here is my resource folder hierarchy:
https://i.stack.imgur.com/dwOcu.png
Related
I have this controller file code. This accepts data from the frontend in the form of #RequestParams. Once I have received the values, I am trying to call another html file called cart .html by adding an attribute using the addAttribute function in models.
#GetMapping("/cart")
#ResponseBody
public String getIfBorrowedBook(Model model, #RequestParam List<Integer> bookIds) {
System.out.println(bookIds);
// if(ifBorrowed.equals("on")) {
// Books book = booksService.findById(bookId);
// book.setIfBorrowed(true);
// booksService.save(book);
List<Books> booksInCart = new ArrayList<>();
for(Integer id:bookIds) {
booksInCart.add(booksService.findById(id));
}
System.out.println(booksInCart);
model.addAttribute("booksInCart", booksInCart);
return "cart";
}
This is my cart.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List Books</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<h1>
Cart
</h1>
<div>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Genre</th>
<th>Author</th>
<th>Edition</th>
</tr>
</thead>
<tbody>
<tr th:each="book: ${booksInCart}">
<td th:text="${book.title}">Title</td>
<td th:text="${book.genre}">Genre</td>
<td th:text="${book.author}">Author</td>
<td th:text="${book.edition}">Edition</td>
<td>
</td>
</tr>
</tbody>
<div>
</div>
</table>
</div>
</div>
</body>
</html>
This is the show_filtered books file that has a form which is submitted to the controller get request once a buttom is clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List Books</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<div>
<h1>
<div th:text="'Books on '+${filteredBooks[0].genre}"></div>
</h1>
</div>
<div>
<form th:action="#{/cart}">
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Genre</th>
<th>Author</th>
<th>Edition</th>
<th>Borrow Book</th>
</tr>
</thead>
<tbody>
<tr th:each="book: ${filteredBooks}">
<td th:text="${book.title}">Title</td>
<td th:text="${book.genre}">Genre</td>
<td th:text="${book.author}">Author</td>
<td th:text="${book.edition}">Edition</td>
<td>
<input type="checkbox" name="bookIds" th:value="${book.bookId}" th:checked="${book.ifBorrowed}"/>
</td>
</tr>
</tbody>
<div>
<a href="cart">
<button type="submit" class="btn btn-primary">Add to Cart</button>
</a>
</div>
</table>
</form>
</div>
</div>
</body>
</html>
But when I try to return the cart string at the end of getIfBorrowed() method, I am not getting the cart.html file. I am just getting a string that says cart on the webpage. This cart.html file is location in src/main/resources/templates. Therefore spring mvc should automatically be able to recognize the file but it does not do so.
Page "bookUpdate.html" does not work correctly because of the errors. I can open this page from page "bookList.html" via click to button "Edit". On all other pages bootstrap work correctly. I try to add to code something like "link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}" " but it did not work.
bookUpdate.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<body>
<div layout:fragment="content" class="container mySpace">
<form th:action="#{/bookUpdate/__${book.id}__}" th:object="${book.id}"
method="post">
<div class="form-group">
<label for="topic" class="form-control-label">Topic</label> <input
type="text" class="form-control" th:field="${book.topic}"
id="topic" />
</div>
<div class="form-group">
<label for="description" class="form-control-label">Description</label>
<textarea class="form-control" th:field="${book.description}"
id="description" style="height: 95px"></textarea>
</div>
<div class="form-group">
<label for="link" class="form-control-label">Link</label> <input
type="text" class="form-control" th:field="${book.link}" id="link" />
</div>
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
</div>
</body>
</html>
SUGGESTION: Try changing "href" to "src":
https://stackoverflow.com/a/52435193/421195
ALSO: be sure to look at the other responses in the same thread.
I hope that helps ... and please post back what you find!
I resolved my issue. I added a links to bootstrap from file "main_layout.html", that I use for header, and added before them <base href="/">. Now it is working fine.
<head>
<base href="/">
<link rel="stylesheet" href="../../static/css/style.css"
th:href="#{css/style.css}" />
<link rel="stylesheet" href="../../static/css/materia/bootstrap.min.css"
th:href="#{css/materia/bootstrap.min.css}" />
<script type="text/javascript" th:src="#{scripts/jquery-3.2.1.min.js}"></script>
</head>
I am currently working on a java project and have made an html page with a design (css) page to accompany it. I have referenced it but it still won't have any effect. I hard reloaded the page still no changes. Don't really understand why this is happening. I keep getting "net::ERR_ABORTED 404" on localhost. The stylesheet file name is indeed correct (being loginStyle.css). They are also both located in the same folder. Would appreciate any help. Thanks!
.btn-color {
background-color: #0e1c36;
color: #fff;
}
.profile-image-pic {
height: 200px;
width: 200px;
object-fit: cover;
}
.cardbody-color {
background-color: #ebf2fa;
}
<!DOCTYPE html>
<html lang="en" xmlns:thymeleaf.org>
<head>
<link rel="stylesheet" type="text/css" href="loginStyle.css" />
</head>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h2 class="text-center text-dark mt-5">Welcome</h2>
<div class="card my-5">
<form class="card-body cardbody-color p-lg-5" th:action="#{/userLogin}" th:object="${user}" method="post">
<div class="text-center">
<img src="https://cdn.pixabay.com/photo/2016/03/31/19/56/avatar-1295397__340.png" class="img-fluid profile-image-pic img-thumbnail rounded-circle my-3" width="200px" alt="profile">
</div>
<div class="mb-3">
<input type="text" class="form-control" id="Username" aria-describedby="emailHelp" placeholder="User Name" th:field="*{Id}">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password" placeholder="password" th:field="*{password}">
</div>
<div class="text-center"><button type="submit" class="btn btn-color px-5 mb-5 w-100">Login</button></div>
<div id="emailHelp" class="form-text text-center mb-5 text-dark">Not Registered?
<a href="#" class="text-dark fw-bold"> Create an Account
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</html>
we need to authenticate users when they access certain group of web services. For that we use auth-method FORM.
When user enters info inside text area and clicks the button, application will try to call a web service. This web service is secured and user needs to authenticate first. The auth form will be displayed as a popup (jquery effect).
Here is the code:
<!DOCTYPE html>
...
<meta http-equiv="Cache-Control" content="no-store,no-cache,must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.bpopup.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $form = $('form');
;(function($) {
$(function() {
$('#update').bind('click', function(e) {
e.preventDefault();
$('#popupLogin').bPopup();
});
});
})(jQuery);
});
</script>
</head>
<body>
<div style="padding-left: 30px;">
<h1 style="padding-left: -20px;">Create a new <i>Clinic</i></h1>
<div id="popupLogin" style="display:none;">
<form action="j_security_check" method="post">
<div>
<table>
<tr>
<td><span>Username</span></td>
<td><input type="text" style="width: 50px;" name="j_username" /></td>
</tr>
<tr>
<td><span>Password</span></td>
<td><input type="password" style="width: 50px;" name="j_password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Login" /></td>
</tr>
</table>
</div>
</form>
</div>
<form id="form">
Clinic Name: <input type="text" name="name" /><br /><br />
<input type="button" id="update" value="Add Clinic" />
</form>
</div>
The problem is that whenever i submit the right info for login, it redirects to this 408 error:
Etat HTTP 408 - The time allowed for the login process has been exceeded. If you wish to continue you must either click back twice and re-click the link you requested or close and re-open your browser
Any idea for a solution?
I'm starting from here :
With that code :
<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<table class="title">
<tr><th>Web Bank application</th></tr>
</table>
<br/>
<fieldset>
<legend>Login Page - please enter your Username and Password</legend>
<form action="loginPage">
Username: <input type="text" name="username"><br>
Password : <input type="text" name="password"><br>
<input type="submit" value="Login">
</form>
</fieldset>
<br/>
<br/>
<br/>
<fieldset>
<legend>Registration</legend>
<form action="register">
First name: <input type="text" name="firstName"><br>
Last name : <input type="text" name="lastName"><br>
Address : <input type="text" name="address"><br>
ID-number : <input type="text" name="idnumber"><br>
User-Name : <input type="text" name="userName"><br>
Password : <input type="text" name="password"><br>
<input type="submit" value="Register">
</form>
</fieldset>
<br/>
<br/><br/><br/><br/><br/><br/>
</body></html>
And while I move from one page to another , I reach here :
With that code :
<!DOCTYPE html>
<html>
<head><title>Authentication failed - a problem has occurred!</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<h1>Sorry , but you are not registered to our bank!</h1>
<fieldset>
<legend>Please press here to continue</legend>
<form action="goingBack">
<input type="submit" value="Press here">
</form>
</fieldset>
</body></html>
And I want to go back to index.html - the first page that I see when the program starts (the first picture above) .
How can I do that ? how can I forward back to index.html ?
Regards
Just add a link to the previous page in the last HTML:
<!DOCTYPE html>
<html>
<head><title>Authentication failed - a problem has occurred!</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<h1>Sorry , but you are not registered to our bank!</h1>
<fieldset>
<legend>Please press here to continue</legend>
<form action="goingBack">
<input type="submit" value="Press here">
</form>
</fieldset>
Go Back <!-- add this -->
</body></html>
You just need javascript. To redirect to /index.html after 5 seconds :
setTimeout('window.location='index.html';', 5000);
setTimeout() is a javascript function that sets a timer to trigger somehting after a given period of time. window.location is a variable that allows you to change the URL of the current page (thus redireting).