Using Template Specific JavaScript in Django

Question

I have a base_generic.html page in django that has the standard UI elements (navbar, footer, etc.), and I have a list.html page which extends the base_generic.html page. The list.html page is using a javascript function that is only used in this page, but for it to work, I have to include it in the base_generic.html page.

How can I include this javascript function in list.html using Django's built-in template tags and features?

Should I use {% verbatim %} or {% scripts %} or another tag template?

Should I include this inline with the {% block content %} that has the html for this django template, or should I place it before or after the {% block content %}?

"but for it to work, I have to include it in the base_generic.html page." Why, if you only need it in list.html? — schrodingerscatcuriosity
– schrodingerscatcuriosity, Commented Sep 18, 2018 at 17:45
list.html is a django template that {% extends "base_generic.html" %}. — Chris
– Chris, Commented Sep 18, 2018 at 17:49
Yes and it overrides anything inside the block content, so it does not need to be in "base_generic.html". — schrodingerscatcuriosity
– schrodingerscatcuriosity, Commented Sep 18, 2018 at 18:10

schrodingerscatcuriosity · Accepted Answer · 2018-09-18 18:03:59Z

1

You have several ways of accomplish what you want:

Just add the javascript snippet inside the {% block content %}

{% block content %}

my javascript();
{% endblock content %}
Use the include statement to a file with your javascript, again, inside the {% block content %}

{% include 'my_javascript.html' %}

In this way, you can reuse your javascript code on other pages.

Create a new block in base_generic.html, like:

{% block my_javascript %}{% endblock my_javascript %}

And in you child template, add the javascript as told in the first points iside these tags, in this case it can be outside or inside the {% block content %}.

answered Sep 18, 2018 at 18:03

schrodingerscatcuriosity

1,8701 gold badge20 silver badges32 bronze badges

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

2 Comments

Chris Over a year ago

This doesn't seem to be working. I am adding my javascript at the bottom of list.html in <script type="text/javascript> </script> tags, before {% endblock %}, and it's not loading the javascript when I go to the page. When I paste the same code in base_generic.html, everything work fine. Any additional suggestions?

Chris Over a year ago

Never mind. Of course I had a typo when implementing your recommended solution. Everything works as it's supposed to. Thanks for the help.

Zsolt B. Horcsik · Accepted Answer · 2021-03-12 06:49:41Z

An alternative would be pass the path for the js file in your views.py:

context = {
        'scripts_to_include':['/static/js/my_js_file.js']
    }

You can obviously include multiple js files here. Then, in your template:

{% if scripts_to_include %}
   {% for script_url in scripts_to_include %}
      <script src="{{script_url}}"></script>
   {% endfor %}
{% endif %}

I like this, cause the js files can still be stored in a directory (instead of putting it right into html), JS files are also reusable.

Collectives™ on Stack Overflow

Using Template Specific JavaScript in Django

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related