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>
Related
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.
I read This article but still have question because I am new in AngularJS. I create Web Application and add AngularJS Core through Nuget Manager.
I try the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First Page</title>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
{{2+2}}
</body>
</html>
So, here I expect my web page shows 4 but it still shows expression.
Please help.
Check if your script is loading for angular.js.
DEMO
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app>
{{2+2}}
</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 trying to include a HTML fragment inside another HTML page like so (below), via JQuery, but nothing works. What could I be doing wrong?
The folder structure looks as follows:
---> Project_Root --> jquery --> jquery-migrate-1.2.1.min
--> index.html
--> parts --> header.html
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery/jquery-migrate-1.2.1.min"></script>
<script>
$(function(){
$("#navbar").load("parts/header.html");
});
</script>
<title>Sample</title>
</head>
<body>
<div id="navbar"></div>
</body>
</html>
header.html:
<p> This is my include file </p>
The actual jQuery library is missing:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jq/jquery-migrate-1.2.1.min"></script>
Migrate plugin is used when you want to use some removed/deprecated methods of jQuery which is not in the latest jQuery library.
I have this HTML:
<!DOCTYPE html> <html lang="en" xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<meta charset="utf-8">
<script src="file:///android_asset/mathscribe/jquery-1.4.3.min.js"></script>
<script src="file:///android_asset/mathscribe/jqmath-etc-0.4.0.min.js"></script>
<title>Displaying maths</title> </head> <body> $$y-y_0=m(x-x_0)$$ </body> </html>
And I want to display the result in an Android TextView. I tried to use Html.fromHtml() but don't work.
it's: http://mathscribe.com/author/jqmath.html