Thymeleaf (th:replace) not working

Question

Hello I'm new in Thymeleaf and encountered a problem that might be trivial, but thymeleaf don't behave like it supposed to be. Just a little help will be much appreciated

I don't use spring boot for the matters of learning. Additionally, I am also pretty new to Spring. Might miss one or two things.

I have simple index.html like this

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index 2</title>
</head>
<body>
    <div th:replace="~{fragments/fragment1 :: fr1}"></div>
</body>
</html>

and fragment1.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div th:fragment="fr1"><h1>HERE IS FRAGMENTS 1</h1></div>
</body>
</html>

Supposedly it does resolve the template, but the result doesn't change at all.

here is what i get from the browser page source

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index 2</title>
</head>
<body>
    <div th:replace="~{fragments/fragment1 :: fr1}"></div>
</body>
</html>

and yes it exactly the same as raw index.html.

So I figured it might have something to do with the configuration, but it just looks fine for me. In my other learning project, it just works fine with the exactly same configuration.

Here is the configuration

/* package and imports */

@Configuration
@EnableWebMvc
@ComponentScan("com.eshop")
public class WebConfig extends WebMvcConfigurerAdapter {

    private static final String UTF8 = "UTF-8";
    private static final String VIEWS = "/WEB-INF/templates/";

    private static final String RESOURCES_LOCATION = "/resources/";
    private static final String RESOURCES_HANDLER = RESOURCES_LOCATION + "**";


    //Thymeleaf Configuration
    @Bean
    public ITemplateResolver templateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setPrefix(VIEWS);
        resolver.setSuffix(".html");
        resolver.setTemplateMode(TemplateMode.HTML);
        resolver.setCacheable(false);
        return resolver;
    }
    @Bean
    public SpringTemplateEngine templateEngine(){
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        templateEngine.setDialect(new SpringSecurityDialect());
        return templateEngine;
    }
    @Bean
    public ViewResolver viewResolver(){
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        viewResolver.setCharacterEncoding(UTF8);
        return viewResolver;
    }

    // tells DispatcherServlet to give static resources and not handle the resources itself
    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }


    // handle various resources like javascript and css
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler( RESOURCES_HANDLER ).addResourceLocations( RESOURCES_LOCATION );
    }
}

pom.xml

<!-- thymeleaf -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.1.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.1.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-springsecurity4</artifactId>
    <version>3.0.0.RELEASE</version>
</dependency>

here is the project tree

webapp
|__resources
|__WEB-INF
   |__i18n
   |__templates
      |__fragments
         |__fragment1.html
      |__index.html

What do I miss here and how can I fix this?

mhasan mhasan · Accepted Answer · 2016-11-01T14:07:33

Try calling the th:replace without ~{}

<div th:replace="fragments/fragment1 :: fr1"></div>

Also make sure you have separate html file named fragment1.html

This Layouts tutorial should help you get going.

Thymeleaf (th:replace) not working

1 Answers