Feb 3, 2014

Django: adding additional Admin static and writing JS snippets for Django Admin

It often gets that you need it because you invent something that is meant to be displayed for admin. E.g. some nasty form field or something. Here is my recipe to add some additional Django static to your admin.

Rather than writing a widget, that is more proper way here... I was using a widget already (from another package). So I could not use it properly, at least without a ton of overrides and complexity it leads to. SO I've decided to add the JS functionality to override a lack of backend.

First of all we should add the javascript/css like so:
# admin.py
class MyModelAdmin(admin.ModelAdmin):
    # admin additions

    class Media:
        css = {
            "all": ("css/my_style.css",)
        }
        js = ("js/my_script.js",)
This add should list your files, loaded in the admin. So you can access them and see in the Django admin frontend itself. Like so:
Now that your script and style are loaded you could just hack anything you want dynamically. Django admin already has a jQuery attached, so you can do whatever you want with it. But there is a problem. You can not just do $(....... your code. This simply does not work and will get error like this:
(Uncaught TypeError: Property '$' of object [object Object] is not a function)
There is no usual jQuery namespace there. but there is a simple hack.
var $ = django.jQuery;

// your usual jQuery code goes here
// e.g.:
// $(document).ready(function() {
    // $('#admin_big_image').wrap('<div class="mrmen-b">');
// });
Thats all. Yu may improvise. E.g. dynamically create or alter DOM elements and manipulate them. Im my case it was a simple Admin banner overlay into image displayed by 3-d party django plugin.
Imagination is the limit.

External links:
http://stackoverflow.com/questions/4709298/difficulty-with-django-and-jquery-why-is-undefined-in-the-admin-app About what may be wrong with your scripts
https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-asset-definitions About whee is this idea taken from in Django docs.

Suggestions? Wrong? Comment here!

1 comment: