How to load a custom JS file in Django admin home?

Question

I have a heavily customized Django admin where it's very simple to load a custom JS file for each of my ModelAdmins:

class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/admin/mymodel.js',)

But how do I do this for the admin "homepage," where all my admin models are listed?

Update #1: amending my question, since the solutions below aren't that useful if I cannot efficiently include Django's jQuery. So, how do I include Django's jQuery in the JS file? If I wrap my code with (as I do in my other ModelAdmin JS files):

(function ($) {
    // my code here...
})(django.jQuery);

I get the following error:

ReferenceError: django is not defined.

Thanks.

Update #2: I was able to include Django's jQuery successfully by following this answer: https://stackoverflow.com/a/10584539/585783

guettli · Accepted Answer · 2020-03-03 11:55:39Z

33

You can override templates/admin/index.html and add the JavaScript in the block extrahead:

{% extends "admin/index.html" %}

{% block extrahead %}
    {{ block.super }}
    # add a <script> tag here with your JavaScript
{% endblock %}

edited Mar 3, 2020 at 11:55

guettli

27.7k109 gold badges423 silver badges779 bronze badges

answered Nov 11, 2013 at 16:05

Simeon Visser

123k19 gold badges192 silver badges185 bronze badges

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

8 Comments

Cloud Artisans Over a year ago

This works and seems clean, thanks... However, how do I include jQuery in the JS file? If I wrap my code with (function ($) { ... })(django.jQuery); the same as in my other ModelAdmin JS files, I get a "ReferenceError: django is not defined"

tobltobs Over a year ago

The above solution will overwrite all code contained in the extrahead block, which might be the reason for the "ReferenceError: django is not defined" error. If you add a {{ block.super }} inside the {% block extrahead %} ... {% endblock %} existing code is preserved.

guettli Over a year ago

@tobltobs I updated the answer. Does it look correct now?

EugZol Over a year ago

It doesn't work. Adding template to templates/admin/index.html doesn't change anything.

EugZol Over a year ago

@MikeSchem That was a long time ago and I don't remember what I did next. Currently I see ./template/admin/<app_name>/base_site.html. First line of that file is {% extends "admin/base_site.html" %}. <app_name> is a name of subfolder in the project, where I put all admin models. Hope that helps.

|

Super Kai - Kazuya Ito · Accepted Answer · 2023-08-27 15:53:55Z

You can load custom js files only on Home admin page. *My answer explains how to load CSS and JavaScript files in Django.

For example, set BASE_DIR / 'templates' to DIRS in TEMPLATES and set BASE_DIR / 'static/' to STATICFILES_DIRS in settings.py as shown below so that Django can recognize templates and static folders just under django-project. *My answer explains how to set Django Templates and I recommand to set whitenoise following my answer to disable your browser to cache the static files of Django: in settings.py as shown below:

# "core/settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates' # Here
        ],
        ...
    },
]

...

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static/' # Here
]

Then, create custom.js in static/admin/js/ and copy index.html from django/contrib/admin/static/admin/index.html in your virtual environment to templates/admin/ as shown below:

django-project
 |-core
 |  └-settings.py
 |-app1
 |-app2
 |-static
 |  └-admin
 |     └-js
 |        └-custom.js # Here
 └-templates
    └-admin
       └-index.html # Here

Then, set alert("Hello World"); to custom.js as shown below:

# "static/admin/js/custom.js"

alert("Hello World");

Then, set custom.js after {% block sidebar %} in index.html as shown below:

# "templates/admin/index.html"

# ...
{% block sidebar %}
{# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<script src="{% static 'admin/js/custom.js' %}" defer></script>
{# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
<div id="content-related">
# ...

Now, Hello World is shown only on Home admin page as shown below:

In addition, you can load custom.js on all admin pages.

So, copy base.html from django/contrib/admin/static/admin/base.html in your virtual environment to templates/admin/ as shown below:

django-project
 |-core
 |  └-settings.py
 |-app1
 |-app2
 |-static
 |  └-admin
 |     └-js
 |        └-custom.js
 └-templates
    └-admin
       └-base.html # Here

Then, set custom.js after <link ... "admin/css/base.css" %}{% endblock %}"> in base.html as shown below, then Hello World is shown on all admin pages:

# "templates/admin/base.html"

# ...
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<script src="{% static 'admin/js/custom.js' %}" defer></script>
{# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
{% block dark-mode-vars %}
  <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
# ...

Be careful, django/contrib/admin/static/admin/js/ has the js files for Django Admin so you should not use the same file names in it to add custom js files to Django Admin as long as you need to overwrite them.

And, running the code below can gether all static files in Django Project into static folder without deleting custom and overwritten js files.

python manage.py collectstatic

Collectives™ on Stack Overflow

How to load a custom JS file in Django admin home?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related