CODEWITHSUNDEEP
javascriptpythondjango
Kurt Peek
Kurt Peek

Reputation: 57391

Loading Javascript in Django using the static template tag

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?

Upvotes: 2

Views: 3256

Answers (3)

Aza
Aza

Reputation: 59

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.

Upvotes: 0

thebjorn
thebjorn

Reputation: 27311

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 e.g. by adding a version number (i.e. dashboard-v1.0.0.js). There are a lot of tools in the js-world to do minification/versioning/etc. for you.

Upvotes: 2

Kurt Peek
Kurt Peek

Reputation: 57391

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.

Upvotes: 0

Related Questions