I have a Flask application where the webpage is a big form. When the user submits, the data is sent to app.py which then executes a series of steps (mainly executing various API calls and logging the data). However, each of these steps can take up to a minute, so I'd like the webpage to have a div that dynamically displays which step is being executed without having to reload at each update.
It would look like:
[Step 1] executing... -> [Step 1] complete. -> [Step 1] complete. -> ...
[Step 2] executing... [Step 2] complete.
[Step 3] executing...
I've read up a bit on AJAX after going through other posts, but from what I can understand that would mean each of the steps has to be executed in javascript. This needs to be done in Python for various reasons, mainly logging and the complexity of the functions.
So, is there any way to send data (such as a list of strings for the updates) to index.html without reloading the page? Currently I have it sending the status messages when the reload completes.
My app.py:
status_message = ''
@app.route("/", methods=['GET', 'POST'])
def home():
global status_message
return render_template("index.html", status=status_message)
@app.route("/submit", methods=["POST"])
def submit():
form = {}
form['field1'] = requests.form['field1']
form['field2'] = requests.form['field2']
[etc...]
step_1(form)
step_2(form)
[etc...]
global status_message
status_message = 'steps 1, 2, ... executed'
return redirect(url_for('home'))
def step_1(form):
[do stuff]
def step_2(form):
[do stuff]
My index.html:
<head>...</head>
<body>
<table>...</table>
<p>{{ status }}</p>
</body>