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?

Answer 1

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.