stackoom
  简体   繁体   中英

JS script doesn't work in a Thymeleaf template

 原文  2021-01-15 16:15:16  2   4    javascript/ html/ css/ spring/ thymeleaf

Question

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:

在此处输入图像描述

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. :-/

4 answers

solution1
 1  2021-01-15 17:29:49

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.

solution2
 1 ACCPTED  2021-01-15 18:16:19

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 thing 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

solution3
 0  2021-01-15 18:25:52

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}">

solution4
 0  2021-01-15 22:26:05

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!

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Thymeleaf onclick attribute with JS script won't work in Spring Another Thymeleaf won't load script and script file (.js) question - (works fine in parent jsp page, but when moved to template, doesn't load) script doesn't work in django template Script for redactor.js doesn't work JS script doesn't work on modal JavaScript doesn't work with bootstrap 4 + thymeleaf Django, code inside <script> tag doesn't work in a template How to load script in react js? script doesn't work Refuse to execute Script when Including JS-Libraries in Thymeleaf Template java script doesn't work in popup.js
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM