JavaScript doesn't work with bootstrap 4 + thymeleaf

Question

I'm developing a web app with Spring Boot, Bootstrap 4 and Thymeleaf. I want to show a bootstrap alert, and then, it hides automatically after seconds (just like a "sucessfully" notification).

I have found a lot of solutions, but all of then need JavaScript. When I tried to use JS on my project, it doesn't work.

I use a default template, which is used in the others views through layout:decorate="~{default}". In this default template, I have the Bootstrap link and scripts:

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

If a put in any view the following code, it does nothing.

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

NOTE: This is just an example to check that JS doesn't work. I takes it from this post.

When I run this code, the alert is showed, but it never disappears. I have tried with a lot of scripts and never work.

Could be a compatibility version problem?

Thanks a lot @Atanu, I had to add th:line in order to run it correctly. — tovarichML, Feb 14 '19 at 08:31

Darnuria · Accepted Answer · 2019-02-13T11:27:56.160

Hi I think this post address your problem:

Why does jQuery throw the error `fadeOut is not a function'?

In this line <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> you use the slim version of Jquery not the full-one, this prompt when I click to "Add to Wishlist" link" a TypeError in the Firefox develloper tool console.

TypeError: $(...).fadeTo is not a function, this means that the Jquery javascript object $("#success-alert") doesn't have attached a fadeTo function.

You can get the full minified version here: https://code.jquery.com/

Snippet from 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: If you don't need SRI you can remove integrity and crossorigin attributes.

Thank you. That was the problem. I just need to change to the full version of jquery and it works perfectly. — tovarichML, Feb 14 '19 at 08:33
I was wondering why a lot of answers involving jquery weren't working for me. Thanks, this let me use a lot of answers I couldn't before. — Jake, Apr 08 '19 at 22:20

JavaScript doesn't work with bootstrap 4 + thymeleaf

1 Answers1