Loading Javascript in Django using the static template tag

Question

I'm trying to following the instructions on https://docs.djangoproject.com/en/2.0/howto/static-files/ , but I'm running into unexpected results. I have a Django project with an app dashboard like so:

.
├── dashboard
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0002_auto_20180227_2103.py
│   │   ├── 0003_auto_20180227_2304.py
│   │   └── __init__.py
│   ├── models.py
│   ├── static
│   │   └── dashboard
│   │       └── dashboard.js
│   ├── templates
│   │   └── dashboard
│   │       ├── checkin_detail.html
│   │       ├── checkin_form.html
│   │       └── checkin_list.html
│   ├── tests.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── my_project
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

In my project's settings.py , the STATIC_URL is as it was created by django-admin startproject :

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'

The dashboard.js file is a simple test script:

alert("Hello, world!");

I'm trying to use the Javascript in the checkin_form.html template like so:

{% load static %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src={% static "dashboard/dashboard.js" %}></script>

<form action="" method="post">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Send message" />
</form>

My views inherit from Django's generic view classes:

from django.views import generic
from .models import CheckIn


class CheckInCreate(generic.CreateView):
    model = CheckIn
    fields = '__all__'


class CheckInUpdate(generic.UpdateView):
    model = CheckIn
    fields = '__all__'

However, when I navigate to the URL rendered by that view, I don't see an alert with "Hello, world."? Can someone point out to me what is wrong with this configuration/implementation?

Answer 1

You need more quotes in this line

<script src={% static "dashboard/dashboard.js" %}></script>

it should be

<script src="{% static "dashboard/dashboard.js" %}"></script>

When you're developing it's a good idea to open your browser's dev-tools (F12) and turn off caching.

In production you'll need to change the name of the file every time the content changes if you want users to see your changes. You can do this eg by adding a version number (ie dashboard-v1.0.0.js ). There are a lot of tools in the js-world to do minification/versioning/etc. for you.

Answer 2

After a while, I found that the Javascript actually does work (without any additional configuration of STATIC_ROOT ); it probably just takes some time for the browser to 'register' the changes.

Answer 3

please review the answer to syntax - usage should be single quotes within the double quotes

    src="{% static 'dashboard/dashboard.js' %}">

not

    src="{% static "dashboard/dashboard.js" %}">

this is enclosed within the "script /script" html elements

due to enclosing a string within a string.