Adding a jQuery script to the Django admin interface

Question

I'm gonna slightly simplify the situation. Let's say I've got a model called Lab.

from django.db import models

class Lab(models.Model):
    acronym = models.CharField(max_length=20)
    query = models.TextField()

The field query is nearly always the same as the field acronym. Thus, I'd like the query field to be automatically filled in after entering text in the acronym field in the Django admin interface. This task must be performed by a jQuery script.

So if I take an example: you want to add a new lab to the database through the Django admin interface. You click the add button and you land on the empty form with the two fields. You manually fill in the acronym field with a value such as ABCD and then the query field should antomatically be completed with the same value, that means ABCD.

How should I proceed?

Juuso Ohtonen · Accepted Answer · 2018-10-13 03:51:17Z

84

To add media to the admin you can simply add it to the meta class Media of your admin class, e.g.:

admin.py

class FooAdmin(admin.ModelAdmin):
    # regular stuff
    class Media:
        js = (
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', # jquery
            'js/myscript.js',       # project static folder
            'app/js/myscript.js',   # app static folder
        )

admin.site.register(Foo, FooAdmin)

Mind the trailing comma if you only have one file included, as it has to be a tuple. You can also opt in css this way.

The admin already has (an older version) of jquery included. To shortcut it for usage add this to the top of the 'myscript' file:

if (!$) {
    $ = django.jQuery;
}

To solve your problem, I would extend the admin. You can add a js event to any DOM node to trigger an ajax call in your myscript file to the correct admin view for handling.

edited Oct 13, 2018 at 3:51

Juuso Ohtonen

9,71210 gold badges71 silver badges104 bronze badges

answered Apr 15, 2013 at 12:10

Hedde van der Heide

22.5k14 gold badges74 silver badges101 bronze badges

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

3 Comments

squarelogic.hayden Over a year ago

This may have changed since it's an old question, but as of Django 1.8.1, the css is specified as a dictionary with the key being the target media and the value being the tuple of paths as above. Use comma separation to target multiple medias or 'all' if it's non-specific.

rabbit.aaron Over a year ago

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

Felipe Buccioni Over a year ago

Better and shorter django.jQuery(function($) { // stuff })

anibal · Accepted Answer · 2025-02-15 17:05:44Z

0

Be careful also because sometimes even django.jQuery can yet not loaded and you will get an error, you can wait until DOM loaded using vanilla js, and then do what the other replies suggested, this way:

document.addEventListener('DOMContentLoaded', function () {
  django.jQuery(function($) {
    // stuff using jQuery directly for example: $("selector")
  });
});

answered Feb 15 at 17:05

anibal

4391 gold badge4 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding a jQuery script to the Django admin interface

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related