jquerypython-3.xflaskflash-message

Extend Flask Messages fading out to multiple Messages


My flash messages are generated on the page using a pretty standard approach:

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
    {% for message in messages %}
        {% set lvl = "alert-danger" if message[1]["result"] == False else "alert-info" %}
    <div class="container"><div id="AMessage" class="alert {{ lvl }}" role="alert">{{ message[1]["content"] }}</div></div>
    {% endfor %}
{% endif %}
{% endwith %}

If only one message is there, I fade it out using jQuery:

<script type="text/javascript">
window.setTimeout(function() {
    $('#AMessage').fadeOut('slow');
}, 3000); 
</script>

How would the jQuery part handle multiple messages? In my approach only one message fades out, the others stay. I want to fade out all messages.


Solution

  • In the div with id="AMessage" put "AMessage" into the class, so it will be

    class="alert {{ lvl }} AMessage"
    

    Then in JQuery replace this ( replacing '#' with '.')

    $('.AMessage').fadeOut('slow');