Couldn't apply javascript to my template in flask despite having it in the static dir. How do I resolve that in the code below?

Question

I have a flask project in which I'm trying to make a tree structure but I don't think the JS is being applied to my tree.html as it couldn't expand the options. Below is the code that I found in internet which I'm trying to make work as I don't have any frontend experience. I'd be grateful for your help.

Base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <script type="text/javascript" src="/static/jsfun.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

tree.html

{% extends "base.html" %}

{% block content %}
    <ul class="tree">
        <li><a href="#">Part 1</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 2</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 3</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
{% endblock %}

jsfun.js

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
    });
}

Here's when the page opens

And nothing happens when I click any item:

Here's the link where I found this code. http://stackoverflow.com/questions/5636375/how-to-create-a-collapsing-tree-table-in-html-css-js — आनंद, Mar 25 '17 at 12:52
Is javascript file is being served from the Flask server? check under `Sources` tab in chrome devtools. — Pradeepb, Mar 25 '17 at 13:43
@Pradeepb No, it's not. I can't seem to figure out why! Please help. — आनंद, Mar 25 '17 at 14:24
@Pradeepb I've even added the js code internally into my html code. Still it's not working. — आनंद, Mar 25 '17 at 15:04
@Pradeepb Could you please share the code in the answer? I'd be highly grateful. Thanks — आनंद, Mar 25 '17 at 15:35
sure. I am working on serving the js file now. together I will share it. — Pradeepb, Mar 25 '17 at 15:37
@Pradeepb Thanks a million. I'm looking forward to seeing it. — आनंद, Mar 25 '17 at 15:39

score 1 · Accepted Answer · answered Mar 25 '17 at 15:46

1

Please check this repo. Check where you are making a mistake. I believe its the way you are importing the js file. you should use like below

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

answered Mar 25 '17 at 15:46

Pradeepb

2,564
3
25
46

Thank you again. I added the 'js' and 'css' folder and gave their path and now it's working fine. I don't know why's that since I had both files in static dir and I was giving their proper path. – आनंद Mar 25 '17 at 15:59
Maybe flask expects you to put css and js files in their respective directory. – आनंद Mar 25 '17 at 16:05
1

Thats how Flask works. it will create a url path using `url_for('static')` and then it will serve the files in that path. – Pradeepb Mar 25 '17 at 16:06
Okay. Thanks for taking the time to do all this. May Python bless you :) – आनंद Mar 25 '17 at 16:07
1

Ha ha. Thanks Anand :) – Pradeepb Mar 25 '17 at 16:08

Couldn't apply javascript to my template in flask despite having it in the static dir. How do I resolve that in the code below?

1 Answers1

Linked