jQuery doesn't work when delivered with flask but works otherwise

Question

I'm pretty new to python, even less experienced with flask, and I cannot figure out this issue. I have the following simple web page with jQuery functionality that works great when I double click the file and open it in a browser:

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#updateBtn").on("click", function() {
                text = "<h2>The div has been updated!</h2>";
                $("#jQuery_div").html(text);
            });
        });
    </script>
    <div>
        <h1>This is a non-jQuery div</h1>
    </div>
    <div id="jQuery_div">
        <h2>This div should update with jQuery</h2>
    </div>
    <button id="updateBtn">update</button>
</body>
</html>

However, when flask delivers the web page on localhost:5000, the jQuery functionality is no longer present. My python is as follows:

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def render():
    return render_template("jquery_test.html")

if __name__ == "__main__":
    app.run(port=5000, debug=True)

My app's file tree is:

/AJAX_practice
    ajax_practice.py
    /templates
        jquery-3.3.1.js
        jquery_test.html

I was trying to follow this tutorial when I couldn't get the "echo" button to work. In my efforts to debug, I have slowly chipped away and drastically simplified the program to the above code to see why I cannot get my jQuery to work through flask. I am still at a loss. I am running the flask app by pressing F5 in IDLE, with no errors in Python 2.7.13 Shell, and the Terminal (from which I started IDLE with $ sudo idle) showing:

my ip - - [date and time] "GET / HTTP/1.1" 200 -
my ip - - [date and time] "GET /jquery-3.3.1.js HTTP/1.1" 404 -

From this, my best guess is that flask cannot find the jquery.3.3.1.js file, though I have tried putting it everywhere in the file tree with no luck. I cannot use the script src to https for jQuery dependencies, as my server will eventually be on a non-internet connected LAN. Am I on the right track? If so, how does flask find and/or navigate jQuery dependencies? Can anyone point me towards some documentation that might help my fundamental understanding of this issue?

Any help on this matter would be greatly appreciated.

mry · Accepted Answer · 2018-02-28T17:26:51.940

You are trying to serve JavaScript file from templates folder. Add a static folder and use that to serve static content.

in your case create a directory structure like "static/js/jquery.min.js"

and then add script reference like this

<script src="{{url_for('static', filename='js/jquery.min.js')}}"></script>

See this : http://exploreflask.com/en/latest/static.html

If you don't want to keep it in "static" folder and use another local directory you can use send_from_directory as shown in this example : https://stackoverflow.com/a/20648053/2118215

score 1 · Answer 2 · answered Feb 28 '18 at 17:14

This has always worked for me with Flask in the past:

<script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>

'static' is the name of the folder it's in (and the 'static' folder is in the root of my project). You can edit this to suit your preferred structure and naming, so change 'static' to 'templates' if that's where you'd rather keep your jquery file, although I would recommend keeping it in a separate folder from your HTML templates, purely in the interests of keeping your project well organised.

score 1 · Answer 3 · answered Feb 28 '18 at 17:15

1

I believe the path to jquery should be /templates/jquery-3.3.1.js

On me flask server when i serve jquery it has the full path from the home directory: /static/js/jquery.min.js

answered Feb 28 '18 at 17:15

mrfred489

80
1
7

jQuery doesn't work when delivered with flask but works otherwise

3 Answers3