Tutorials References Exercises Bootcamp Menu
Sign Up Create Website Get Certified Upgrade

Django Global JavaScript File


Add a JS File to the Entire Project

In the previous chapter we learned how to add a .js file to an application in a project.

Adding .js files that you can use in the entire project, is done the same way as with .css files_

Start by creating a folder on the project's root level, this folder can be called whatever you like, we have already created it, and we called it mystaticfiles:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/

Add a file in the mystaticfiles folder, name it myglobal.js (you can call it whatever you like, just remember that JavaScript file must have the .js file extension):

my_tennis_club
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        myglobal.js

Open the JavaScript file and insert the following:

my_tennis_club/mystaticfiles/myglobal.css:

function myMessage() {
  alert("A message from a global file!");
}

Modify Settings

You have probably done this in the Add Global CSS File chapter. If not add this STATICFILES_DIRS list in the settings.py file:

Add a STATICFILES_DIRS list:

my_tennis_club/settings.py:

.
.

STATIC_URL = 'static/'

#Add this in your settings.py file:
STATICFILES_DIRS = [
    BASE_DIR / "mystaticfiles"
]
.
.

In the STATICFILES_DIRS list, you can list all the directories where Django should look for static files.

The BASE_DIR keyword represents the root directory of the project, and together with the / "mystaticfiles", it means the mystaticfiles folder in the root directory.


Modify the Template

The next step is to include the css file in a template:

Open the template.html template, and add the following:

Example

members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<script src="{% static 'myglobal.js' %}"></script>
<body>

<button onclick="myMessage()">Click me!</button>

</body>
</html>
Run Example »

Use JavaScript Files From Both Folders

To use .js files from different folders, we just import them in HTML, and Django will search the folders you have listed until it finds a match:

Example

members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<script src="{% static 'myglobal.js' %}"></script>
<script src="{% static 'myfirst.js' %}"></script>
<body>

<button onclick="myMessage()">Click me! (mystaticfiles folder)</button>
<button onclick="myFunction()">Click me (static folder)!</button>

</body>
</html>
Run Example »

Search Order

If you have files with the same name, Django will use the first occurrence of the file.

The search starts in the directories listed in STATICFILES_DIRS, using the order you have provided. Then, if the file is not found, the search continues in the static folder of each application.