How to output messages to a page dynamically without refreshing the page on flask?

Question

Flask

Good day.
I'm currently working with flask and ran into the following problem.
My application has a function that does some calculations and displays the results on a web page. At the moment everything works with the help of flashing messages, but in order to see the messages you need to reload the page. I need everything to work dynamically. and all messages appeared without reloading the page.

html render:

{% macro render_field(field) %}
 <dt> {{ field.label }}
 <dd> {{ field(**kwargs)|safe }}
 {% if field.errors %}
        <ul class=errors>
        {% for error in field.errors %}
                <li>{{ error }}</li>
        {% endfor %}
        </ul>
 {% endif %}
 </dd>
{% endmacro %}

Main html file

<div class="container-fluid" style="min-height:100%">

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

Answer 1

I got the impression that this is a question from the series "do it quickly and for free, because I'm too lazy"
what exactly did you do to make it work as you need and what did not work out?

Answer 2

1. You create a route/method to get posts by id - in its response, html with the post, or serialized data about the post, will be transmitted. (I would prefer json).
2. When you open the page, you load only the last N-posts with id.
2. On the page, you specify on which event to check the last n-posts.
3. Add a child DOM element to the posts block. Assign a post style.
4. Fill the element with the content of the response to XHR (AJAX) using js DOM.
youmightnotneedjquery.com
PS: You can pass a post as a chunk of HTML and paste it as innerHTML.