Menu
I’m still relatively new to Flask, and a bit of a web noob in general, but I’ve had some good results so far. Right now I’ve got a form in which users enter a query, which is given to a function that can take anywhere between 5 and 30 seconds to return a result (looking up data with the Freebase API).
The problem is that I can’t let the user know that their query is loading during this time, as the results page only loads once the function finishes its work. Is there a way I can display a loading message while that's going on? I found some Javascript that could display a loading message while page elements are still loading, but my waiting period happens before ‘render_template’.
I knocked together some example code, just to demonstrate my situation:
Python:
from flask import Flask from flask import request from flask import render_template import time app = Flask(__name__) def long_load(typeback): time.sleep(5) #just simulating the waiting period return "You typed: %s" % typeback @app.route('/') def home(): return render_template("index.html") @app.route('/', methods=['POST']) def form(display=None): query = request.form['anything'] outcome = long_load(query) return render_template("done.html", display=outcome) if __name__ == '__main__': #app.debug = True app.run() Excerpt from index.html:
<body> <h3>Type anything:</h3> <p> <form action="." method="POST"> <input type="text" name="anything" placeholder="Type anything here"> <input type="submit" name="anything_submit" value="Submit"> </form> </p> </body> Excerpt from done.html:
<body> <h3>Results:</h3> <p> {{ display }} </p> </body> Any help would be greatly appreciated, I hope this example helps.
510
Answer #2:Download and put it into your static folder. Now when you click 'Submit', the js function should hide your content and display a loading GIF. This will display until your data is processed and flask loads the new page.
A view function is the code you write to respond to requests to your application. Flask uses patterns to match the incoming request URL to the view that should handle it. The view returns data that Flask turns into an outgoing response.
Debug modeA Flask application is started by calling the run() method. However, while the application is under development, it should be restarted manually for each change in the code. To avoid this inconvenience, enable debug support. The server will then reload itself if the code changes.
Add this to your index.html or js file (I'm assuming you have jQuery here, you could use standard javascript of course.):
<script type="text/javascript">// <![CDATA[ function loading(){ $("#loading").show(); $("#content").hide(); } // ]]></script> Add this to you html or css file:
div#loading { width: 35px; height: 35px; display: none; background: url(/static/loadingimage.gif) no-repeat; cursor: wait; } You can get an adequate GIF from http://www.ajaxload.info/. Download and put it into your static folder.
Then change your submission button to call above js function:
<input type="submit" name="anything_submit" value="Submit" onclick="loading();"> and add in a loading and a content div to you base html file:
<body> <div id="loading"></div> <div id="content"> <h3>Type anything:</h3> <p> <form action="." method="POST"> <input type="text" name="anything" placeholder="Type anything here"> <input type="submit" name="anything_submit" value="Submit" onclick="loading();"> </form> </p> </div> </body> Now when you click 'Submit', the js function should hide your content and display a loading GIF. This will display until your data is processed and flask loads the new page.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
