flashing message in flask on a bootstrap modal

Question

I'm trying to follow the flask documentation. After a successful form submission (a signup form), I flash a message saying 'Signup successful'. However, I'm trying to have this message appear on a bootstrap modal.

Simplified code is...

@app.route('/signup', methods=['GET','POST'])
def signup():
    form = SignupForm()
    if form.validate_on_submit():
        flash('You were successfully signed up')
return render_template('signup.html', form=form)

Now I only need to trigger the modal with the success flash message if form submission is successful. So I had my modal HTML snippet inside the flash message checks.



{% with messages = get_flashed_messages() %}
{% if messages %}
    
    {% for message in messages %}
        
            
                
                    
                        {{ message }}
                    
                
            
        
    {% endfor %}
    
{% endif %}
{% endwith %}

This doesn't trigger the modal at all. Any thoughts on how I might get this to work?

user_11134011 · Answer

This is an old question (over 5years) but someone may still stumble on this in the future just as I did now.

The previous answer works great if you need not separate script from HTML, if you need to you may do this:

In the HTML file: Add an id to the area that only gets rendered when messages are available. In my case, I added id=flashes
In JS file: Rely on the .length property of JQuery to show the modal only when the message(s) area gets rendered.

HTML

  
  
    
      
        
          {% with messages = get_flashed_messages() %}
          {% if messages %}
          
            {% for message in messages %}
            {{ message }}
            {% endfor %}
          
          {% endif %}
          {% endwith %}

Script

$(document).ready(function() {
  if ($("#flashes *").length > 0){
    $("#modalId").modal();
  }
});

flashing message in flask on a bootstrap modal

2 Answers