I am currently learning to use thymeleaf and javascript. I want to create a header, and when click on the user's avatar a dropdown menu will show.
The problem I am countering is when I add <script> tag to my header fragment, when I click on the button, the console give me ReferenceError, function not found.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
</head>
<body>
<header th:fragment="header" class="global-header">
<!-- Logged in show the user's avatar-->
<div class="profile bulge-icon" sec:authorize="isAuthenticated()">
<button class="profile-btn" id="profile-btn" th:onclick="dropdown()">
<img class="img" alt="user profile picture" th:src="#{images/profile-placeholder.png}"/>
</button>
<div id = "dropdown-menu">
<form th:action="#{/logout}" method="post">
<button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button>
</form>
</div>
</div>
</header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
To make this js work, I need to add .js file to my page that uses the header fragment. For example, my test.html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
</head>
<body>
<header th:replace="global/header :: header"></header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
Is there a method to let .js works when <script> tag is put in my header.html. So in this way, I don't need to add header.js to every page that use the header fragment.
When you use th:replace, Thymeleaf will literally take the contents of that <header> element and place it in your main page. That JavaScript line in your header fragment will never be used.
The way I usually handle this is using Thymeleaf Layout Dialect so that all needed script tags are included on every page. See https://ultraq.github.io/thymeleaf-layout-dialect/ for info on how to use it.
For example, create a layout.html file like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
<div layout:fragment="page-content">
</div>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</head>
</html>
Now update test.html to use it:
<!DOCTYPE html>
<html
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>Test</title>
</head>
<body>
<div layout:fragment="page-content">
<header th:replace="global/header :: header"></header>
<!-- Add more content for the test page here -->
</div>
</body>
</html>
If the header should be on all pages, you can also move it into layout.html.
Related
I am working on a java spring project and would like to add a static javascript file to an HTML page. here is what I currently have it seems to work for the css but not the js. the basic file structure is
i am trying to get static js from /static/js/pie-chart.js and put it into /templates/show/match.html here is what i currently have for the html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- css is working -->
<link rel="stylesheet" href="../static/css/main.css" th:href="#{/css/main.css}">
</script>
</head>
<body>
<!-- the script does not seem to be linking to the page -->
<script src="../static/js/pie-chart.js" th:src="#{/js/pie-chart.js}">
<body>
</html>
Well, the static folder can be treat as the root path.So you don't have to add this '../static/' prefix in your href. You can try as following to see if it works.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- Delete the relative path-->
<link rel="stylesheet" href="/css/main.css">
</script>
</head>
<body>
<!- Delete the relative path-->
<script src="/js/pie-chart.js">
<body>
</html>
Use this in order to link your Js file in HTML Page :--
<script src="js/pie-chart.js">
This image in my sample boot project. you can using th:href="#{/your/js}".
like this :
readingList.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Reading List</title>
<link rel="stylesheet" th:href="#{/css/style.css}" />
</head>
<body>
<label>Reading List!!</label>
</body>
</html>
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="../scripts/angular.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-3.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="../css/home.css">
<title>Hello</title>
</head>
<body>
<div id="d1">
asfsdg
</div>
</body>
</html>
I am trying to add styles to html elements in jsp page but when i add the style and run it on tomacat 9.0 nothing happens there and only plain text appears.
And when I moved to page source and click the links to css it shows me an error
HTTP Status 404 – Not Found
Type Status Report
Message /TutorNextDoor/css/home.css
Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
Apache Tomcat/9.0.0.M18
You can move your css and scripts folder inside Webcontent and give the path in the html/jsp file in the following manner :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Scripts -->
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/angular.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-3.2.0.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/home.css">
<title>Hello</title>
</head>
<body>
<div id="d1">
asfsdg
</div>
</body>
</html>
The is a part of my html where I am trying to include the another HTML file "content.html" but it is not working. Those addresses in the source are correct but still I am not able to make it happen.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-include src="'content.html'"></div>
</body>
</html>
and this is my content.html
<div class="container">
<h1>Heading!</h1>
</div>
You should add ng-app="" to your page html tag, so that angular will get kick off on the page. After that will start traversing the page & will collect all directive & it will compile them.
<html lang="en" ng-app="">
Instead of ng-include with src you could directly pass template value in ng-include attribute as well.
<div ng-include="'content.html'">
Demo Plunkr
I'm not really sure why this is not working but I have an MVC View that I want to display the current date/time/seconds on the page. I've put the javascript in the "Scripts/script.js" file. I then added the following at the bottom of the MVC View.
#section scripts {
<script src="~/Scripts/script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setDateTimer();
});
</script>
}
Thing is when I run it something is causing an error. Unfortunately at the moment I can't see the actual error message because of the way they have the site configured any error just takes you to a generic error page. I do know it has something to do with the code above because removing it cause the page to work.
For testing purposes I even removed all but simple javascript code in the file but that still doesn't work. Right now this is all that is in my script.js file.
function setDateTimer() {
var today = new Date();
}
I know the name of the of the .js file in the code is correct because I just dragged and dropped it to the page from the solution explorer.
Here is most of my _Layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Layout page doesn't have a place to render the section you can change it like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
#RenderSection("scripts",true)
</body>
</html>