Django: How to load javascript from static files with template usage

Question

I have a problem:

in addWorkout.html:

{% extends "workout/base.html" %}
{% block footer %}
<script type="text/javascript" src="{% static js/addWorkout.js %}"></script>
{% endblock %}

in base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<body>

{% block content %}{% endblock %}

{% block footer %}{% endblock %}

</body>
</html>

This will generate an error:

Invalid block tag on line 49: 'static', expected 'endblock'. Did you forget to register or load this tag?

This error stems from the src attribute of the script tag in addWorkout.html. Apparently, django doesn't allow for the static tag to be inside of a block tag.

But how can I then import javascript from static by using the script-tag at the bottom of the body element?

EDIT:

If I change addWorkout.html to:

{% extends "workout/base.html" %}
{% load static %}
{% block footer %}
<script type="text/javascript" src="{% static js/addWorkout.js %}"></script>
{% endblock %}

I'll get the following error:

It can be simple <script type="text/javascript" src="/static js/addWorkout.js"></script> link without any braces, provided you defined STATIC_ROOT in your settings.py file — rkatkam
– rkatkam, Commented Nov 9, 2017 at 12:25
I believe you have to load static in the extended template too, please give it a try — Harigovind R
– Harigovind R, Commented Nov 9, 2017 at 12:26
PLEASE do not use a question to ask other questions. You should have opened a new question instead. — bruno desthuilliers
– bruno desthuilliers, Commented Nov 9, 2017 at 12:41

bruno desthuilliers · Accepted Answer · 2017-11-09 12:30:28Z

3

Child templates don't inherit the tags libraries loaded by their parents, you have to explicitely load static tags in your addWorkout template. Note that this is documented...

answered Nov 9, 2017 at 12:30

bruno desthuilliers

78.3k6 gold badges102 silver badges129 bronze badges

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

3 Comments

Sahand Over a year ago

Adding {% load static %} to addWorkout.html results in another error. I've detailed the error in my edit.

bruno desthuilliers Over a year ago

You want src="{% static "js/addWorkout.js" %}" - else the template engine tries to parse js/addWorkout.js as a template or filter expression.

bruno desthuilliers Over a year ago

FWIW this is documented too : docs.djangoproject.com/en/1.11/ref/templates/builtins/… - perhaps you could read the fine manual before asking questions ?

Harigovind R · Accepted Answer · 2017-11-09 12:33:20Z

0

I was able to reproduce the same error after removing the static tag from the extended template file, change the code as below and give it a try

{% extends "workout/base.html" %}
{% load static %}
{% block footer %}
<script type="text/javascript" src="{% static js/addWorkout.js %}">
</script>
{% endblock %}

Replace your addWorkout.html with the above code

answered Nov 9, 2017 at 12:33

Harigovind R

8268 silver badges19 bronze badges

2 Comments

Sahand Over a year ago

Thanks. I tried this, but it only results in another error. I've detailed this in my edit.

Harigovind R Over a year ago

While giving the the path use double quotes for the js path only, src={% static "plugins/parsleyjs/dist/parsley.min.js" %}

Collectives™ on Stack Overflow

Django: How to load javascript from static files with template usage

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related