Flask flash message not closing on clicking the 'x' button

Question

I have a flask python code for user login and change password. When I change password I need to flash a message whether password was changed correctly or not.

{% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-primary alert-dismissible fade show" role="alert">
                        <span>{{ message }}</span>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endif %}
          {% endwith %}

I have used the above code snippet to flash message. My problem is that when I click the 'X' icon to close the message, I does nothing. can anyone please tell me where I am doing wrong? Also is it possible to timeout the alert message (i.e. alert message disappears after a couple of seconds?) if yes then how?

NOTE: I have zero experience in Javascript or any other method. Please provide me answers through HTML,CSS or python only. Thank you

Answer 1

Without seeing the remainder of your code, I can only assume that the issue here is similar to mine.

I was following an outdated tutorial when I began seeing this issue of flash messages not closing and even the close button itself wasn't being placed correctly. The solution was to recheck the dependencies for CSS and JS on the bootstrap instruction page. I was using a jQuery version that apparently wasn't compatible with Bootstrap 4.

https://getbootstrap.com/docs/4.0/getting-started/introduction/

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 2

I was just getting this issue. I am guessing you are missing includes for bootstrap css/js assets along with jquery.

Answer 3

Your code might not be 100% compatible with the Bootstrap version you are using, or so was it for me. What helped was checking the relevant page in Bootstrap documentation under the version I am using (Bootstrap 5.2). Small details that mattered and had to be adjusted are below.

from:

<button class="close" data-dismiss="alert">

to:

<button class="btn-close" data-bs-dismiss="alert">

Full Snippet:

<div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto content">
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="alert alert-{{ category  }} mt-3 alert-dismissible" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick=delete_flash(this)>
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            {% endfor %}
          {% endif %}
        {% endwith %}
        </div>
      </div>
    </div>

CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

JS:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>