Flask not executing Javascript in static directory

Question

Overview: I am using Ubuntu 14.04 in virtualbox, running the Python based Flask module to host a local portal with html, javascript, jquery and php elements.

Expected Outcome: I have a static JS file called test.js that I expect to be served when the template portal.html loads.

Issue: The HTML page loads correctly, I receive a GET status 200 for test.js in the terminal, however the JS script does not execute (i.e. 'Twitter' is not present in the tags with id="screen_name"). I checked localhost:5000/static/js/test.js and the script is present. I tried including the exact same JS script directly in the HTML rather than as a static file and it worked fine.

Question: If my static JS script in being requested why is it not executing?

Directory Structure:

portal
    - portal_server.py
    - templates
        - portal.html
    - static
        - img
        - css
        - js
            - test.js

Contents of test.js:

var x = document.getElementById('screen_name');
x.textContent = 'twitter';

Relevant element of HTML:

<h3 id="screen_name"></h3>

Script element of HTML:

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

<script src="{{ url_for('static', filename='js/test.js') }}"></script> how does that come out in the HTML sent to the clinet ? — Jasen
– Jasen, Commented Dec 24, 2014 at 8:33
If I understand your question it appears <script src="/static/js/handlesdb.js"></script> in the browser's inspect element — malenoir
– malenoir, Commented Dec 24, 2014 at 8:48

Matt Healy · Accepted Answer · 2014-12-24 10:29:17Z

2

One possible explanation:

If your <script> tag is in the <head> of your document, it will execute before the body is loaded. In this situation, the element with Id "screen_name" won't yet be loaded, and thus var x = document.getElementById('screen_name'); will not contain the result you expect.

If this is the case, try moving the <script> tag to the end of your document.

answered Dec 24, 2014 at 10:29

Matt Healy

18.6k5 gold badges59 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

malenoir Over a year ago

Thank you! That was exactly what was happening. Works as expected now.

Collectives™ on Stack Overflow

Flask not executing Javascript in static directory

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related