Python Flask, redirect after rendering a template

Question

I'm trying to redirect a user after a template has been rendered. Essentially, my code waits till a variable turns to False, and then redirects the user. The code renders a loading animation and tells the user to wait. The code renders the html and css template, but then when the wait is over doesn't redirect the user to a new url. My code:

from flask import Flask, redirect, url_for, request, render_template
import json
import requests
import webbrowser
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

global is_busy
is_busy = False


app = Flask(__name__, template_folder='template')


@app.route('/')
def main_menu():
    return redirect(url_for('enteruserid'))


@app.route('/EnterID')
def enteruserid():
    global is_busy
    return render_template('enterid.html')
def waitUntil(condition, output):
    time.sleep(1)


@app.route('/Scrape', methods=['POST', 'GET'])
def login():
   global is_busy
   if request.method == 'POST':
      id = request.form['nm']
      try:
          int(id)
          return render_template('waitingscreen.html')
          waitUntil(is_busy, False)
          return redirect(url_for('scrapingtheinternet', target_id=id))
      except:
          return redirect(url_for('notanint'))
   else:
      id = request.args.get('nm')


if __name__ == '__main__':
   app.run(debug=True)

This code doesn't include the function where the "Scraping" occurs.

enterid.html:

<!DOCTYPE html>
<html>
    <head>
        <title>DCF</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Reverse image search discord user id's">
        <meta name="keywords" content="Discord">
        <style>
            h1 {
                font-family: Arial, sans-serif;
                color: #2f2d2d;
                text-align: Center;
            }
            p {
                font-family: Arial, sans-serif;
                font-size: 14px;
                text-align: Center;
                color: #2f2d2d;
            }
        </style>
    </head>
    <body>
    <form action = "http://localhost:5000/Scrape" method = "post">
          <h1>Reverse Image Search</h1>
          <p>Enter User ID: </p>
      <p><input type = "text" name = "nm" /></p>
      <p><input type = "submit" value = "submit" /></p>
    </body>
</html>

waitingscreen.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>Loader Bar</title>

    <style>
        body {
            background-color: #262626;
            font-family: Lato, sans-serif;
        }

        .loader {
            width: 150px;
            margin: 150px auto 70px;
            position: relative;
        }

        .loader .loading_1 {
            position: relative;
            width: 100%;
            height: 10px;
            border: 1px solid yellowgreen;
            border-radius: 10px;
            animation: turn 4s linear 1.75s infinite;
        }

        .loader .loading_1:before {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 100%;
            background-color: yellowgreen;
            box-shadow: 10px 0px 15px 0px yellowgreen;
            animation: load 2s linear infinite;
        }

        .loader .loading_2 {
            position: absolute;
            width: 100%;
            top: 10px;
            color: green;
            font-size: 22px;
            text-align: center;
            animation: bounce 2s linear infinite;
        }

        @keyframes load {
            0% {
                width: 0%;
            }

            87.5% {
                width: 100%;
            }
        }

        @keyframes turn {
            0% {
                transform: rotateY(0deg);
            }

            6.25%,
            50% {
                transform: rotateY(180deg);
            }

            56.25%,
            100% {
                transform: rotateY(360deg);
            }
        }

        @keyframes bounce {

            0%,
            100% {
                top: 10px;
            }

            12.5% {
                top: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <div class="loading_1"></div>
        <div class="loading_2">Please Wait...</div>
    </div>
</body>

</html>

I'd appreciate any help. Thanks :)

The code after your return statement is never reached. I think, out of the box flask doesn't support what you are asking for. You could use a web socket that updates the html when the scarping is finished. You may have a look at Flask-SocketIO for this. — niclas, Apr 30 '22 at 16:21

score 1 · Accepted Answer · edited Apr 30 '22 at 19:00

Basically, the return statement ends the function in almost all languages.

say

def func():
    print("hi")
    return 0
    print("after return")
func()

output:

hi

Whatever after return will not be executed (although see this answer about finally).

In your context, you can try to preview "waitingscreen.html" on the frontend when you click the login button and avoid rendering it from the backend.

Some simple JS will help.

refer: Display a ‘loading’ message while a time consuming function is executed in Flask

Hope it will clear your query.

Python Flask, redirect after rendering a template

1 Answers1