CODEWITHSUNDEEP
javascripthtmlcssspringthymeleaf
JavaMat87
JavaMat87

Reputation: 33

JS script doesn't work in a Thymeleaf template

I'm trying to add a default 404 error page to my Spring app, and I thought it would be nice to add an animate template like that: https://codepen.io/wikyware-net/pen/xywexE

The whole idea is a validation of form and redirection to the error page, if it fails. Basically, redirection works fine, but the problem I have is I can not make the JS part running (the tost doesn't pop up :-/)...

Here's how my error page looks like:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
    <script type="text/javascript" th:src="@{/static/js/error.js}"></script>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img"
             src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
    <div>
        <a th:href="@{/home}" target="_blank" class="btn-primary">Go back</a>
    </div>
</div>
</body>

Both CSS and JS code I use, is included in the template I attached at the very beginning.

Here's also the snapshot of the project's resources structure:

enter image description here

What am I doing wrong here? What are best practices in importing such a HTML template into a Spring Boot/Thymeleaf project?

Thank you in advance for your help.

Kind regards, Matthew

EDIT:

So I changed my html page to that form:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
</div>
    <div>
        <a th:href="@{/home}" target="_blank" class="btn-primary">Go back</a>
    </div>
    <script src="webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" th:src="@{/js/error.js}"></script>
    <script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
</body>

Plus, I also updated my build.gradle file:

buildscript {
    ext {
        springBootVersion = '2.0.5.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

plugins {
    id 'war'
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'pl.mpas'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
targetCompatibility = 1.8

repositories {
    mavenLocal()
    mavenCentral()
}


dependencies {
    compile('org.springframework.boot:spring-boot-starter-data-jpa')
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    compile group: 'org.springframework.boot', name: 'spring-boot-starter-validation', version: '2.3.7.RELEASE'
    compile group: 'org.webjars', name: 'bootstrap', version: '3.3.6'
    compile group: 'org.webjars', name: 'bootstrap-datepicker', version: '1.0.1'
    compile group: 'org.webjars.bower', name: 'jquery', version: '3.5.1'
    runtime('org.springframework.boot:spring-boot-devtools')
    runtime('com.h2database:h2')
    runtime('mysql:mysql-connector-java')
    testCompile('org.springframework.boot:spring-boot-starter-test')
    compile('org.apache.struts:struts2-core:2.3.16.1')
    providedCompile('javax.servlet.jsp:jsp-api:2.1')
    providedCompile('javax.servlet:javax.servlet-api:3.1.0')
}

Thanks to that, I no longer see any errors in the browser's console. However... JS still doesn't work as expected. :-/

Upvotes: 1

Views: 6710

Answers (4)

Ajit Kumar Singh
Ajit Kumar Singh

Reputation: 378

Your files structure looks good. you have added your js file in error page by

 <script type="text/javascript" th:src="@{/static/js/error.js}"></script>

but I don't think you need to mention static in your source URL for JS, Change it to

<script type="text/javascript" th:src="@{/js/error.js}"></script>

also please add the below dependencies in your pom.xml for jQuery and Bootstrap

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.6</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.0.1</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>1.9.1</version>
</dependency>

change your error.html file as shown below

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/error.js}"></script>
</body>
</html>

now it will work fine. Let me know if any doubt. Refer:https://www.springboottutorial.com/spring-boot-with-jquery-and-bootstrap-web-jars

Upvotes: 2

JavaMat87
JavaMat87

Reputation: 33

All right guys, I finally made it running. In my case the problem was a lack of jQuery's script tag in html's head section. I used Google's CDN hosting:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

So the final, working version of my page looks as follows:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img"
             src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
</div>
<div>
    <a th:href="@{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
    <script src="webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/js/error.js}"></script>
</div>
</body>

Thanks again for your help! Cheers!

Upvotes: 0

Chandra Kant
Chandra Kant

Reputation: 207

Try to change your JavaScript reference in your HTML page:

<link rel="stylesheet" href="../static/css/error.js" type="text/javascript" th:href="@{/error.js}">

Upvotes: 0

andrewJames
andrewJames

Reputation: 22059

A couple of notes:

Change your JavaScript reference for your error.js script to this:

<script type="text/javascript" th:src="@{/js/error.js}"></script>

There is no need to include the /static portion of the URL.

Also, have you included jQuery in the page? For example:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

You will see an error in the browser's console if jQuery is not available.

Upvotes: 1

Related Questions