[FIXED] Trying javascript to have my flash my message disappear after a few seconds after displayed. My code wont work

Issue

I am having a flash message that displays "Post Successful" when the form is filled out. I use Flash message with python on the app.py.

Post.html

<div class="posting">
<form class='blogform' action="/posts" method="post">
        <div class='blog_form_content'>
        <h2 class='blog_form_title'>Blog Post </h2>
        <h4 class='blog_form_subtitle'>create a post</h4>
        </div>
        {{ form.hidden_tag()}}
        <div class="box">Title: <div class='text'>{{ form.title }}</div> </div><br>
        <div class="box">Author: <div class='text'>{{ form.author }}</div></div><br>
        <div class="box">Content: <div class='content'>{{ form.content }}</div></div><br>
        <div class="box" style="float: right">{{ form.submit }} </div><br>
</form>

</div>
<div class='messages'>
{% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for message in messages %}
            <li><div id='message'

this is where I am trying to add my javascript. I want this message to disappear after a few seconds.

{{ message }} </div> </li>
        {% endfor %}
    {% endif %}
{% endwith %}
</div>

This is my app.py.

I am unclear if I need to use this page to connect the javascript.

@app.route('/posts', methods=['POST', 'GET'])
def post():
    form = BlogForm()
    if form.validate_on_submit():
        new_blog = Blog(title=form.title.data,
                        author=form.author.data,
                        dateposted=datetime.now(),
                        content=form.content.data)
        db.session.add(new_blog)
        db.session.commit()
        flash("Posted Successfully")
        return redirect(url_for('post'))

    post = Blog.query.all()


    return render_template("posts.html", form=form, post=post)

If someone could help me out with this that would be awesome. I am new to javascript.

Solution

My code works as follows:

                    <div class="flashwrapper">
                    {% with messages = get_flashed_messages(with_categories=True) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div id=flashwrapper class="alert alert-{{ category }} alert-dismissible" role="alert">{{ message }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close" onClick="close('flashwrapper')">
                                <span aria-hidden="true">&times;</span>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                </div>

with this js code:

$(document).ready(function() {
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 2000); // <-- time in milliseconds

});

Answered By - gittert