Using th:block (fragments) in thymeleaf templates

Question

I'm still kind of new to Thymeleaf and SpringBoot.

I have been trying to inject a block with all the javascript mappings into a page - dashboardAdmin.html using thymeleaf fragments.

I have been able to inject fragments with enveloped with a block correctly using the conventional fragments however since i have to inject multiple script tags that are not within any tag in the html template, I wasn't able to use the conventional method.

I found a similar question here and have follow the specific solution provided but still have not succeeded and I have added the dependency. Perhaps there is some sort of syntax error that I do not know about. Since I couldn't find much reference on this, can anyone kindly advice me on this?

This is the fragment.html which contains all the templates to be inserted into other pages

<body>
<th:block layout:fragment="script">
    <script th:src="@{/vendor/login_v14/vendor/jquery/jquery-3.2.1.min.js}"></script>
    <!-- Bootstrap 4 -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- jsGrid -->
    <script th:src="@{/vendor/jsgrid/demos/db.js}"></script>
    <script th:src="@{/vendor/jsgrid/jsgrid.min.js}"></script>
    <!-- AdminLTE App -->
    <script th:src="@{/js/main.js}"></script>
</th:block>
</body>

While this is the page template that I am injecting the block to - dashboardAdmin.html

<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html"
             xmlns:layout="http://www.w3.org/1999/xhtml"
             layout:decorate="~{fragments/fragments}">
<head th:replace="fragments/fragments :: head">
</head>
<body class="hold-transition sidebar-mini">

<!--js scripts-->
<th:block layout:fragment="script">

</th:block>
</body>

If someone could tell me what I'm doing wrong here, it will be much appreciated :D !

andrewjames andrewjames · Accepted Answer · 2020-02-29T23:43:14

I think you can simplify your HTML to get what you need.

In your dashboardAdmin.html, insert something like this at the location where you want to place your fragment:

<div th:replace = "fragment.html :: script1">
</div>

(You may need to adjust that "fragment.html" if your fragment HTML file is at some other location in your resources directory.)

In your fragment.html, you can use something like this:

<th:block th:fragment="script1">
    <div>your content here, instead of this div</div>
</th:block>

<th:block th:fragment="script2">
    <div>your content here, instead of this div</div>
</th:block>

This is the entire contents of the fragment file, in my case - but obviously you can replace my <div>...</div> with all the HTML from your question.

I included 2 separate named fragments in the above example, for illustration.

The contents of the "script1" block (but not the containing block itself) will be inserted into your dashboardAdmin.html page.

It should be as simple as that, if I have understood your question correctly. Basically, the approach should be no different from the way you mentioned you have already been able to insert fragments into other HTML files.

Using th:block (fragments) in thymeleaf templates

1 Answers