django how to include javascript in template

Question

I’m working on a project and following the documentation. I didn’t succeed to include javascript.

Here is my settings:

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_ROOT = '/static/'

TEMPLATE_DIRS = (
    os.path.join(BASE_DIR, 'templates'),
)

So, I have created a static folder with a javascipt file in my project.

myproject/static/app.js

my urls.py:

urlpatterns = [
    url(r'^$', 'app.views.home'),
    url(r'^admin/', include(admin.site.urls)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

and in my template:
myproject/templates/base.html:

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>

My other template:

{% block content %}
    hello world
{% endblock %}

I have the "hello world" on

http://127.0.0.1:8000/

but i do not have my image or script.

I tried so many different things but I never succeed

Asked By: BoumTAC

||

Source

Answer 1

urls.py

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
]

settings.py

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_URL = '/static/'

# remove STATIC_ROOT

base.html

Your title tag was not closed.

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>

Answered By: Charlesthk

Answer 2

Your template should say {% load staticfiles %} instead of {% load static %}

Source:
https://docs.djangoproject.com/en/1.8/howto/static-files/

Also, os.path.join(BASE_DIR, "static"), only looks for static files in your apps, as in app/static/app/static.js. If you have static files that do not belong to any specific app, but rather to the project, you need to add the folder explicitly. See point 4 of ‘Configuring static files’ on the docs page I mentioned.

Answered By: Jorick Spitzen

Answer 3

I am new at programing thus take my points with a pinch of salt. There i go. maybe you have more apps meaning you gotta check your tree as it should go as the django documentations points.
meaning that you should have your_app/static/your_app/in here you must put three more folders corresponding to css, images and js all with their respective files.

Also notice that your static url should be named diferent than your static root.
Once you have done this you must tell django where to find the statics for each app thus you gotta state it within the STATICFILES_DIRS.

After all this then you gotta run the collectstatic command.

I´m still missing the part in which you connect the js files of each app to the template.. so I cannot further help you dude…. hope it helps a little bit

Answered By: Victor Orgaz

Answer 4

From my understanding, the STATICFILES_DIRS should be in the settings.py and defined like this:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

Please check the documentation.

Answered By: canishk

Answer 5

Create directory named ‘static’ at base directory. i.e. at similar level to project directory.
Then add following in settings.py

STATIC_URL = '/static/'
#setting for static files
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),) code here

Answered By: chintan bhatt

django how to include javascript in template

Question:

Answers: