JavaScript не работает с bootstrap 4 + тимелеаф
Я разрабатываю веб-приложение с 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 не работает. Беру из эта почта.
Когда я запускаю этот код, отображается предупреждение, но оно никогда не исчезает. Я пробовал много скриптов и никогда не работал.
Может проблема в версии совместимости?
Большое спасибо @Atanu, мне пришлось добавить th:line, чтобы запустить его правильно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Привет, я думаю, что этот пост решает вашу проблему:
Почему jQuery выдает ошибку «fadeOut не является функцией»?
В этой строке <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> вы используете тонкую версию Jquery, а не полную, это приглашение, когда я нажимаю ссылку «Добавить в список желаний», вызывает TypeError в консоли инструментов разработчика Firefox.
TypeError: $(...).fadeTo is not a function, это означает, что объект javascript Jquery $("#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: Если вам не нужен НИИ, вы можете удалить атрибуты integrity и crossorigin.
Спасибо. В этом была проблема. Мне просто нужно перейти на полную версию jquery, и она отлично работает.
Мне было интересно, почему многие ответы, связанные с jquery, у меня не работали. Спасибо, это позволило мне использовать много ответов, которые я не мог раньше.
в тимелеафе напишите <script th:inline = "javascript"></script> вместо тега <script type = "text/javascript"><script>