0
115
ViewsFinding my Javascript file that is in another folder
I have a flask project and I have a templates folder and a root folder that holds my files.
The structure looks like this:
flask_py_Javascript_sandbox/
templates/
form.html
venv/
app.py
formjs.js
My form.html looks like this:
<!DOCTYPE html>
<html>
<body>
// Test form
<script src="../formjs.js"></script> // I have also tried "formjs.js", "/formjs.js"
<script>
myFunc();
</script>
My formjs.js file looks like this:
function myFunc() {
alert("works");
}
I have looked at these 2 questions but they seem to have a slightly different issues. Issues where I don't know if their fix works for my flask project:
How to call external JavaScript function in HTML and Javascript in different folder than HTML
This seems like something simple but all tutorials I've seen just tell you what to type in your files but do not give you the nuances of folder structure.
Any help is appreciated.
Here is a screenshot of my folder structure as my text is causing some confusion:
1 answers
Answer question0
The problem was the fact that I was hosting the development site on my own machine. To import a JS file it most be in a static folder. This is not made clear in a lot of tutorials because it is handled for you.
Folder structure should have a static folder and should look like this
Root
-static
file.js
-templates
page.html
...
To load your js file into your html you need to import it like any other script but you will need to add the url_for.
<script src="{{ url_for('static', filename='file.js') }}" type="text/javascript"></script>
Better explained here.
Used in an answer here.
If you are like me you didn't know you needed a static file and no amount of searching would have help.