Python Flask flash not working correctly

python flask jinja2

13,777

Solution 1

Please have a look at this. this might help you

<!doctype html>
<title>My Application</title>
 {% with messages = get_flashed_messages() %}
   {% if messages %}
     <ul class="flashes">
        {% for message in messages %}
         <div class="message_flash">{{ message }}</div>
        {% endfor %}
    </ul>
  {% endif %}
 {% endwith %}
{% block body %}
{% endblock %}

and Do some styling with the css

p {
 color:blue;  
 }

And add some jquery to the code

$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $(".message_flash").hide() function
  setTimeout(function() {
      $(".message_flash").hide('blind', {}, 500)
  }, 5000);
})

Hope this helps you.

Solution 2

I think what you need is some CSS to make it look nice. If you add some bootstrap to your base.html/layout.html, you can do this in base.html/layout.html.

{% with messages=get_flashed_messages(with_categories=true) %}
 {% for category, message in messages %}
  <div class='alert alert-{{category}} text-center alert-dismissible fade show m-auto'>
    {{ message }}
   </div>
 {% endfor %}
{% endwith %}

And now whenever you are to display a flash message, do this in your route.

@app.route('/')
def index():
   flash('Your message here', 'your bootstrap category[eg:success, primary, etc]')
   return reder_template('contact.html')

13,777

webminal.org

Free and Open Source programmer. Projects include: FileSystem Projects and Free Online Linux Terminal

Updated on June 04, 2022

Comments

webminal.org almost 2 years
I've simple 2 line code :
```
@app.route('/contact/')
def contact():
  flash('We are reachable at ')
  return render_template('contact.html')
```
I get the message 'We are reachable at' at /contact but it appears are normal text message. It doesn't background color(blue) or disappears after seconds. where contact.html contains
```
{% extends "layout.html" %}

{% block title %}Contact{% endblock title %}

{% block body %}
  <h2> Contact Us  </h2>
   Your email address must be valid as this is where reply
   will be sent. We do not share this address with anybody.

{% endblock body %}
```
- Antti Haapala -- Слава Україні almost 9 years
  
  You'd presumably need some CSS to do that...
- ljk321 almost 9 years
  
  You'll need CSS and JS to accompilsh that, otherwise flash are just some plaintext.
- webminal.org almost 9 years
  
  I have them too..I works on my localhost but not my server. Will check the CSS/JS files for any modification. thanks