JS-скрипт не работает в шаблоне Thymeleaf

Question

Я пытаюсь добавить страницу ошибки 404 по умолчанию в свое приложение Spring, и я подумал, что было бы неплохо добавить такой шаблон анимации: https://codepen.io/wikyware-net/pen/xywexE

Вся идея заключается в проверке формы и перенаправлении на страницу с ошибкой в случае сбоя. В принципе, перенаправление работает нормально, но у меня проблема в том, что я не могу запустить JS-часть (тост не появляется: - /) ...

Вот как выглядит моя страница с ошибкой:

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

И CSS, и JS-код, который я использую, включены в шаблон, который я прикрепил в самом начале.

Вот также снимок структуры ресурсов проекта:

enter image description here

Что я здесь делаю не так? Каковы лучшие практики импорта такого HTML-шаблона в проект Spring Boot / Thymeleaf?

Спасибо заранее за вашу помощь.

С наилучшими пожеланиями, Мэтью

РЕДАКТИРОВАТЬ:

Поэтому я изменил свою html-страницу на эту форму:

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

Кроме того, я также обновил свой файл build.gradle:

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')
}

Благодаря этому я больше не вижу ошибок в консоли браузера. Однако ... JS по-прежнему не работает должным образом. : - /

javascript html css spring thymeleaf

1

JavaMat87 15 Янв 2021 в 19:15

Answer 1

Структура ваших файлов выглядит хорошо. вы добавили свой js-файл на страницу ошибки

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

Но я не думаю, что вам нужно упоминать static в исходном URL-адресе для JS, измените его на

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

Также добавьте указанные ниже зависимости в свой pom.xml для jQuery и 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>

Измените файл error.html, как показано ниже

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

Теперь все будет нормально работать. Сообщите мне, если возникнут сомнения. Обратитесь: https://www.springboottutorial.com/ Spring-boot-with-jquery-and-bootstrap-web-jars.

1

Ajit 15 Янв 2021 в 18:16

Answer 2

Пара замечаний:

Измените ссылку на JavaScript для сценария error.js на это:

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

Нет необходимости включать часть URL /static.

Кроме того, вы включили jQuery на страницу? Например:

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

Вы увидите сообщение об ошибке в консоли браузера, если jQuery недоступен.

1

andrewjames 15 Янв 2021 в 17:29

Answer 3

Попробуйте изменить ссылку на JavaScript на своей HTML-странице:

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

0

Chandra Kant 15 Янв 2021 в 18:25

Answer 4

Хорошо, ребята, наконец-то я заработал. В моем случае проблема заключалась в отсутствии тега jQuery script в разделе заголовка html. Я использовал CDN-хостинг от Google:

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

Итак, окончательная рабочая версия моей страницы выглядит следующим образом:

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

Еще раз спасибо за помощь! Ура!

0

JavaMat87 15 Янв 2021 в 22:26

JS-скрипт не работает в шаблоне Thymeleaf

РЕДАКТИРОВАТЬ:

4 ответа

Похожие вопросы

Новые вопросы

javascript