Display a ‘loading’ image while a time consuming function is executed in Flask

Question

I have an app in Flask that looks like this:

app = Flask(__name__)

@app.route('/')
def start():
    return render_template('page1.html')  # loads the start page on the beginning

@app.route('/page2',methods=['GET','POST'])
def read():
    if request.method == 'POST':
        # lots of actions taking a long time
        return render_template('page2.html', arg1=arg1, arg2=arg2)

I want to add a photo on my HTML page that will show "loading" until page2 will upload. This is similar to my current HTML on page1:

<html>
<head>
    <meta charset="UTF-8">
    <title>IP / ISP Research</title>
    <link rel="stylesheet"
      type="text/css"
      href="/static/style.css"/>
</head>

<body>
    <center>
    <h2>Search for something</h2>
<form class="form-style-7" action="/page2" method="POST" >
    <ul>
    <li>
        <label for="arg1">IP</label>
        <input type="text" name="arg1" value="{{arg1}}" maxlength="100">
        <span>Enter arg1</span>
    </li>
    <li>
        <label for="arg2">ISP</label>
        <input type="text" name="arg2" value="{{arg2}}" maxlength="100">
        <span>Enter arg2</span>
    </li>
    <li>
        <input class="go_button" type="submit" value="GO" >
    </li>
    </ul>
</form>    
</center>
</body>
</html>

Things I've tried:

Mostly writing javascripts in my HTML such as shown here.

Also tried adding a function for showImage() and adding this to the HTML form tag: onclick="showImage()

Also tried adding this to the HTML button tag: onSubmit="return showImage()

turkus · Answer 1 · 2016-08-25T09:02:35.190

Use jQuery for example:

<html>
<head>
    <meta charset="UTF-8">
    <title>IP / ISP Research</title>
    <link rel="stylesheet"
      type="text/css"
      href="/static/style.css"/>
    <script src="//code.jquery.com/jquery-3.1.0.min.js"
</head>

<body>
    <center>
    <h2>Search for something</h2>
<form class="form-style-7" action="/page2" method="POST" >
    <ul>
    <li>
        <label for="arg1">IP</label>
        <input type="text" name="arg1" value="{{arg1}}" maxlength="100">
        <span>Enter arg1</span>
    </li>
    <li>
        <label for="arg2">ISP</label>
        <input type="text" name="arg2" value="{{arg2}}" maxlength="100">
        <span>Enter arg2</span>
    </li>
    <li>
        <input class="go_button" type="submit" value="GO" >
    </li>
    </ul>
</form>    
<script>
    $( ".go_button" ).submit(function( event ) {
        # function showing loading progress bar
    });
</script>
</center>
</body>
</html>

thanks, i'm not familiar with javascript or jQuery, can you please help with the full function that I need to write? and do I put it in my HTML ? — Yarden, Aug 25 '16 at 09:00

Display a ‘loading’ image while a time consuming function is executed in Flask

1 Answers1