Finding my Javascript file that is in another folder

Question

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:

For relative references the URLs are relevant and not the folders. In many cases the folder structure and the URL structure may be the same, but it seems it's not the same in your case. What are the URLs of the HTML and JS files? In general you shouldn't be using relative URLs anyways, but always use absolute URLs (beginning with /), then it doesn't matter in which folder/URLs the the HTML and JS are in. In your case it seems the absolute URL of the JS file seems to be /venv/formjs.js, so use src="/venv/formjs.js". — RoToRa
– RoToRa, Commented Mar 8, 2022 at 8:24
... Maybe I'm misreading the file structure. If the JS file is not in venv but in the root, use /formjs.js. — RoToRa
– RoToRa, Commented Mar 8, 2022 at 8:31
I'm running this through my computer right now. I just type flask run and let it get setup in http://127.0.0.1:5000/. Is that going to make a difference? — Funlamb
– Funlamb, Commented Mar 8, 2022 at 17:52

Funlamb · Accepted Answer · 2022-03-09 20:57:43Z

0

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.

answered Mar 9, 2022 at 20:57

Funlamb

6258 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Finding my Javascript file that is in another folder

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related