How to override django admin templates to add custom javascript?

Question

I have a model that I need to add some custom javascript processing to its admin form.

I have tried an implementation via the following guide: https://docs.djangoproject.com/en/1.5/ref/contrib/admin/#overriding-admin-templates

So I created my own change_form.html, and I overrode object-tools-items and put my js in there, but I'm not seeing it when I go to the change form. Then, just as a test, I put it directly into the real django change_form.html, but still nothing.

Then to see if that template is being used, I changed it - added data, created syntax errors, but still, it had no effect. So it seems like that template isn't being used at all. I grepped for change_form.html to see where it's rendered from, and I found it in contrib/admin/options.py:render_change_form(), so I set a breakpoint there, but it was never hit. But the HTML sure looks like it came from that template.

Can anyone give me some direction here please?

Django debug toolbar will tell you exactly how a page is constructed, and about a million other indispensable things. github.com/django-debug-toolbar/django-debug-toolbar — Rob L
– Rob L, Commented Jan 21, 2014 at 18:20
The django debug toolbar is definitely very cool and helpful. But when I installed it it also downloaded and installed django 1.6 (I was running 1.5) Luckily it installed it in a different place, but now my default version is 1.6 and I need to run 1.5. But thanks anyway, as I'm sure it will come in handy. — Larry Martell
– Larry Martell, Commented Jan 21, 2014 at 19:17
install an older version or use pip install --upgrade-strategy="only-if-needed" to avoid auto upgrading dependencies when not necessary — DylanYoung
– DylanYoung, Commented Mar 15, 2017 at 15:22

Odif Yltsaeb · Accepted Answer · 2014-01-21 18:29:51Z

3

You do not need to override admin templates to add your custom javascript to admin pages.

You can add your assets like this:

https://docs.djangoproject.com/en/dev/topics/forms/media/#assets-as-a-static-definition

And then you just need to override your forms that admin site uses.

answered Jan 21, 2014 at 18:29

Odif Yltsaeb

5,68614 gold badges55 silver badges82 bronze badges

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

2 Comments

Larry Martell Over a year ago

Thanks! This looks like exactly what I need. I created a form to override the admin form: class MyCategoryAdminForm(forms.ModelForm): class Meta: model = Category class Media: js = ('CategoryAdmin.js') But instead of picking up CategoryAdmin.js it seems to split this and it looks for a file for each character: <script type="text/javascript" src="/static/C"></script> <script type="text/javascript" src="/static/a"></script> <script type="text/javascript" src="/static/t"></script> <script type="text/javascript" src="/static/e"></script> . .

Larry Martell Over a year ago

I figured that issue out - it wants a tuple for the js so adding a comma fixed that. Now I just have to get the script to work ;-)

Super Kai - Kazuya Ito · Accepted Answer · 2023-06-28 14:25:26Z

You can add custom css and js files to only one admin page or all admin pages. *I don't know how to add css and js files to all admin pages in only one app.

First, I explain how to add them to only Person admin page.

For example, you hava the custom css and js files as shown below:

django-project
 |-core
 |  |-settings.py
 |  └-static
 |     └-core
 |        └-admin
 |           └-app1 
 |              |-css
 |              |  |-custom1.css # Here
 |              |  └-custom2.css # Here
 |              └-js
 |                 |-custom1.js # Here
 |                 └-custom2.js # Here
 |-app1
 |  |-models.py
 |  └-admin.py
 └-app2

Now, set them to css and js in Media class in Person admin as shown below to add them to only Person admin page:

# "app1/admin.py"

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    class Media:
        css = {
            "all": (
                "core/admin/app1/css/custom1.css", # Here
                "core/admin/app1/css/custom2.css" # Here
            )
        }
        js = (
            "core/admin/app1/js/custom1.js", # Here
            "core/admin/app1/js/custom2.js" # Here
        )

Next, I explain how to add them to all admin pages.

So, set BASE_DIR / 'templates' to DIRS in TEMPLATES in settings.py as shown below:

# "core/settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates', # Here
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Then, 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
 |  └-static
 |     └-core
 |        └-admin
 |           └-app1 
 |              |-css
 |              |  |-custom1.css
 |              |  └-custom2.css
 |              └-js
 |                 |-custom1.js
 |                 └-custom2.js
 |-app1
 |  |-models.py
 |  └-admin.py
 |-app2
 └-templates
    └-admin
       └-base.html # Here

Now, set them after <link ... "admin/css/base.css" %}{% endblock %}"> in base.html to add them to all admin pages as shown below without setting them to css and js in Media class in Person admin:

# "templates/admin/base.html"

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

Collectives™ on Stack Overflow

How to override django admin templates to add custom javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related