from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True
@app.route("/", methods=["POST", "GET"])
def index():
if request.method == "POST":
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div#loading {
width: 50px;
height: 50px;
display: none;
background: url('https://i.giphy.com/3oEjI6SIIHBdRxXI40.gif') center no-repeat;
cursor: wait;
padding-left:100%;
}
</style>
</head>
<body>
<form method="POST">
<input type="text">
<button type="submit" onclick="loading();">
<div id="loading"></div>
<div id="content">
<i class="fas fa-search"></i>
</div>
</button>
</form>
<script type="text/javascript">
function loading(){
$("#loading").show();
$("#content").hide();
}
</script>
</body>
</html>I'm building a Flask app, where when you press a button, a loader should replace the search glass icon with a loading gif.
At the moment, the gif isn't appearing upon clicking the button.
When I remove display:none from the loading style, the gif appears, so I know it's there.
You are using JQuery to show and hide the elements, but you have not included it in the template.
So include a script tag like
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
before the script tag where you're referencing JQuery
I figured I already had a div id = content and so it was removing the entire div. Remember to check your IDs!