How to choose children elements position inside a Thymeleaf's fragment?

Question

I would like to choose the position of the children elements inside a fragment using Thymeleaf like in the following examples.

fragments.html:

<div th:fragment="awesomeFragment">
     Some Text
     <div><!-- children must be here --></div>
</div>

view.html:

<div th:replace="fragments :: awesomeFragment">
     <a href="www.google.com"/>
</div>

Expected output:

<div>
     Some Text
     <div><a href="www.google.com"/></div>
</div>

Is it possible? If so, how could I do this?

score 2 · Accepted Answer · answered Apr 08 '16 at 04:03

You can do it via layouts.
Use Thymeleaf Layout Dialect for this.
(If you using Spring Boot it's already turned on!)

The layout will be presented in this form :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title></title>
</head>
<body>
    <header>
        Some text
    </header>
    <div layout:fragment="content">
        <p>Page content goes here</p>
    </div>
</body>

And you page will be:

<!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"
  layout:decorator="base/test">
<head>
    <title></title>
</head>
<body>
    <div layout:fragment="content">
        <a href="www.test.com">Test.com</a>
    </div>
</body>

I tried it in my Thymeleaf test project. The source code of the page in browser turned out like you wanted :

Is it really necessary to declare namespaces? I made it without namespace declarations and all works like a charm. — Natanael, Apr 09 '16 at 18:44
Sam, although your answer is satsfactory to solve part of my problems I still have an doubt. More details below — Natanael, Apr 09 '16 at 20:29

Natanael · Answer 2 · 2016-04-10T03:01:17.363

Edit:

The following question is solved! It can be done using Includes and Fragments.

Sam, although your answer is satsfactory to solve part of my problems I still have an doubt.

This method replaces an element and all of its ancestors with those specified in the layout and preserves the content of the original element.

It works well for layouts, but how about replace the content of a fragment only?

Lets suppose I have the following scenario. I'm developing a library of bootstrap widgets. Some widgets, like navbar have internal containers and this containers will contain other elements. Ex.:

fragments/navbar.html

<!-- navbar --> 
<div th:fragment="navbar" class="navbar">
    <div class="navbar-inner">        
        <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
        <ul class="nav">
            <!-- children goes here -->                
        </ul>
    </div>
</div>
<div>

Inside index.html

This is my Navbar:
<div th:replace="fragments/navbar :: navbar">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</div>

And get the following output:

    This is my Navbar:    
    <!-- navbar --> 
    <div th:fragment="navbar" class="navbar">
            <div class="navbar-inner">        
                <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    <div>

Do you understand the difference? They way you shown to me replaces the element and its ancestors, but preserves the content. The result is the whole document root being replaced.

In some situations I need to replace just the element being replace. I need to keep its parents and contents too.

As I said it's solved. Here goes an example of how to implement this:

layouts/navbar.html:

<!DOCTYPE html>
<html>
<body>       
    <div layout:fragment="navbar" class="navbar">
        <div class="navbar-inner">        
            <a class="brand" href="#">Navbar</a>
            <ul class="nav" layout:fragment="navbar-content">
                <!-- children goes here -->                
            </ul>
        </div>
    </div>  
</body>
</html>`

document.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Home</title>
    </head>
    <body>This is my Navbar:
        <div layout:include="layouts/navbar :: navbar" th:remove="tag">
            <ul layout:fragment="navbar-content">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </body> 
</html>

How to choose children elements position inside a Thymeleaf's fragment?

2 Answers2