shahidfoy
shahidfoy

Reputation: 2311

Trying to import static javascript to thymeleaf

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

enter image description here

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>

Upvotes: 0

Views: 3903

Answers (3)

0gam
0gam

Reputation: 1443

This image in my sample boot project. you can using th:href="@{/your/js}".

like this :

enter image description here

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>

Upvotes: 0

Sumit
Sumit

Reputation: 957

Use this in order to link your Js file in HTML Page :--

<script src="js/pie-chart.js">

Upvotes: 0

Tianhao Wang
Tianhao Wang

Reputation: 186

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>

Upvotes: 1

Related Questions