js scripts not loading in jinja2 template

Question

I have a situation where, replacing a url string "/CreditHistory/10216" with a jinja2 variable {{creditNumbers|safe}}, messes up the loading of javascript files. More specifically, this works;

{% block Scripter %}

<script type="text/javascript" src="./static/assets/js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="./static/assets/js/d3/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
<script type="text/javascript" src="./static/assets/js/queue/queue.js"></script>
<script src='./static/assets/js/graphsFordringer.js' type='text/javascript' charset="utf-8"></script>
<script type="text/javascript"> 

queue().defer(d3.json, "/CreditHistory/10216").await(makeGraphs);

</script>

{% endblock %}

But, this does not;

{% block Scripter %}

<script type="text/javascript" src="./static/assets/js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="./static/assets/js/d3/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
<script type="text/javascript" src="./static/assets/js/queue/queue.js"></script>
<script src='./static/assets/js/graphsFordringer.js' type='text/javascript' charset="utf-8"></script>
<script type="text/javascript"> 

queue().defer(d3.json, "{{creditNumbers|safe}}").await(makeGraphs);

</script>

{% endblock %}

The errors that gets thrown in the web-browser implies that none of the javascript files get loaded. One of them is for example that queue is not a defined function. What is also apparent is that the "{{creditNumbers|safe}}" variable does load to "/CreditHistory/10216". So, in short the variable loading seems to break the javascript loading. Not that I have found reference to similar issues in the documentation, so that probably is not what is happening.

EDIT:

It now seems that I have misunderstood the entire situation. It looks like it is the way that the jinja2 template variable is declared in the app.py file that is the root cause.

The @app.routecode that is failing is;

@app.route('/KundeFordringer/<int:KundeNr>')
def fordringer(KundeNr):

    jsonSti = "/CreditHistory/"+str(KundeNr)
    return render_template("fordringer.html", creditNumbers=jsonSti)

However, if I change the code to the following, it works fine;

@app.route('/KundeFordringer')
def fordringer():

    return render_template("fordringer.html", creditNumbers="/CreditHistory/10216")

As mentioned previously, viewing the source code from the web browser, one could see that the "/CreditHistory/10216"was loaded when using the first @app.route declaration. But apparently something is, never the less, off with that way of doing it.

Any help would be greatly appreciated

@doru, thank you for the suggestion, but it now seems that I misunderstood the problem, and that the problem is stemming from the app.py declarations, see EDIT in question. — Rookie
– Rookie, Commented Apr 2, 2015 at 14:37
What do you see when inspecting your <script> from the chrome dev tools ? — Timothée Jeannin
– Timothée Jeannin, Commented Apr 2, 2015 at 14:42
@TimothéeJeannin The console throws 16 errors. 14 of which are "Failed to load resource" errors of either css of js files. the last 2 errors are uncaught reference errors, related to two functions, that should have been declared in the js files that did not load. — Rookie
– Rookie, Commented Apr 2, 2015 at 14:48
Are you absolutely sure the resource you're trying to load is available ? Can you check if the generated url is correct ? Try copy pasting the exact url of the resources that failed to load and copy that in your browser omnibox. — Timothée Jeannin
– Timothée Jeannin, Commented Apr 2, 2015 at 14:51
@TimothéeJeannin I do not know whether or not I should cry or laugh, because that was the problem. The js file paths started with ./ instead of just /. I would definitely like to thank you by checking an answer as accepted. You cannot believe how much time I have used with this problem... — Rookie
– Rookie, Commented Apr 2, 2015 at 14:59

Timothée Jeannin · Accepted Answer · 2015-04-02 15:00:08Z

The loading of the javascript files is relative to the current url. Basically if you are browsing

http://mywebsite.com/KundeFordringer/456

Then the browser is going to try to load those files:

http://mywebsite.com/KundeFordringer/456/static/assets/js/crossfilter/crossfilter.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/d3/d3.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/dc.js/dc.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/queue/queue.js

What you want is probably

http://mywebsite.com/static/assets/js/crossfilter/crossfilter.js
http://mywebsite.com/static/assets/js/d3/d3.js
http://mywebsite.com/static/assets/js/dc.js/dc.js
http://mywebsite.com/static/assets/js/queue/queue.js

Their might be a problem either with your script tags:

<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>

That needs to be renamed

<script type="text/javascript" src="/static/assets/js/dc.js/dc.js"></script>

Or a problem with your static_url_path.

Collectives™ on Stack Overflow

js scripts not loading in jinja2 template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related