JavaScript не работает с начальной загрузкой 4 + тимелист - PullRequest
Новая
       8

JavaScript не работает с начальной загрузкой 4 + тимелист

0 голосов
/ 13 февраля 2019

Я разрабатываю веб-приложение с Spring Boot, Bootstrap 4 и Thymeleaf.Я хочу показать предупреждение о начальной загрузке, а затем оно автоматически скрывается через несколько секунд (точно так же, как «успешно»).

Я нашел много решений, но для этого нужен JavaScript.Когда я пытался использовать JS в своем проекте, он не работал.

Я использую шаблон по умолчанию, который используется в других представлениях через layout:decorate="~{default}".В этом шаблоне по умолчанию у меня есть ссылка на Bootstrap и сценарии: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

...

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Если положить в любой вид следующий код, он ничего не делает. 

<!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:decorate="~{default}">

    <head>
      ...
    </head>

    <body class="text-center">
        <div layout:fragment="content">

            <div class="product-options">
                <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
                <a href="" class="btn btn-mini"> Purchase </a>
            </div>
            <div class="alert alert-success" id="success-alert">
                <button type="button" class="close" data-dismiss="alert">x</button>
                <strong>Success! </strong> Product have added to your wishlist.
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#success-alert").hide();
                    $("#myWish").click(function showAlert() {
                        $("#success-alert").fadeTo(2000, 500)
                        .slideUp(500, function () {
                            $("#successalert").slideUp(500);
                        });
                    });
                });
            </script>
            ...

        </div>
    </body>

ПРИМЕЧАНИЕ. Это всего лишь пример проверки того, что JS не работает.Я взял его из этого поста .

Когда я запускаю этот код, появляется предупреждение, но оно никогда не исчезает.Я пробовал много скриптов и никогда не работал.

Может быть проблема с версией совместимости?

1 Ответ

0 голосов
/ 13 февраля 2019

Привет, я думаю, что этот пост решает вашу проблему:

Почему jQuery выдает ошибку `fadeOut is not function '?

В этой строке <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>вы используете уменьшенную версию Jquery, а не полную, это приглашение, когда я нажимаю ссылку «Добавить в список желаний» на TypeError в консоли инструментов Firefox develloper.

TypeError: $(...).fadeTo is not a function, это означает, что Jqueryjavascript объект $("#success-alert") не имеет функции fadeTo.

Вы можете получить полную уменьшенную версию здесь: https://code.jquery.com/

Фрагмент из https://code.jquery.com

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

PS: Если вам не нужны SRI , вы можете удалить атрибуты integrity и crossorigin.

...