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>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>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.
