2

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?

2
  • 2
    What does your script tag look like when viewing the source in the browser? Does browsing to 127.0.0.1:8000/static/dashboard/dashboard.js serve you what you expect? Commented Feb 28, 2018 at 16:46
  • Yes, it does. Actually, the Javascript does work after a while (as reported in the answer below). Commented Feb 28, 2018 at 17:00

3 Answers 3

2

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.

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

Comments

0

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.

2 Comments

You may find yourself better off doing a hard refresh in future, by pressing Ctrl+F5.
sorry that's my bad it's a long time didn't use the template and static files now I'm using Angular for a frontend and i delete my answer and sorry for wrong information.
0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.