Django: django-admin-tools: adding custom js

Question

I have installed django-admin-tools and created a dashboard.py in my project folder.

Inside this file I have specified a media class:

#myproject/dashboard.py 
class Media: 
        css = ('',) 
        js = ('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ 
jquery.min.js',)

In my settings I have:

#settings.py
# admin_tools 
ADMIN_TOOLS_INDEX_DASHBOARD = 
'myproject.dashboard.CustomIndexDashboard' 
ADMIN_TOOLS_APP_INDEX_DASHBOARD = 
'myproject.dashboard.CustomAppIndexDashboard'

And my URLs are configured as follows:

#urls.py
... 
urlpatterns+= patterns('', 
        url(r'^admin_tools/', include('admin_tools.urls')), 
        url(r'^admin/', admin.site.urls), 

        url(r'', include('feincms.urls')), 

)

Anyone see any glaring mistakes? I don't see the jquery file being downloaded in firebug. I assume jquery is also part of admin_tools, but this error message seems to indicate it is not?

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a 
function

Any help is appreciated.

What do you mean? The code works if I "manually" include jquery. Without admin-tools everything works as well... — Joseph Tura, Mar 13 '12 at 07:06
I don't think that is the issue. As described in my question, the browser doesn't even try to download the file. The script tag is nowhere in the source code. Must be some other trivial issue. — Joseph Tura, Mar 15 '12 at 08:02
So the script tag doesn't appear? Tried removing the empty css variable? Also, what if you put a local js path instead of http? Does it appear then? — dan-klasson, Mar 15 '12 at 14:00

score 1 · Answer 1 · answered Jan 28 '13 at 15:06

I think this is probably because the jQuery function has been renamed in the django admin to avoid conflicts.
If you can see the jquery file being loaded in the view-source, and typing $ in the console produces that error, then try django.jQuery
If you want to use $ you need to do something like $ = django.jQuery, and then at the bottom of you script, put it back to django.jQuery
See https://github.com/philippbosch/django-geoposition/blob/master/geoposition/static/geoposition/geoposition.js as an eg.

score 0 · Answer 2 · answered Mar 12 '12 at 21:59

You are right, jquery is already included by admin_tools. Unless you need a newer version, it's probably better to use the included one. Or doesn't it load even without the Media class?

Problematic in your setup is that you load jquery from an external host. I would also expect this to work, however, if you look at the dashboard.html template in admin_tools which injects the files, you will notice that it prepends {{ media_url }} to each js file. The result is an invalid include like '/media/http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'. This is obviously an issue of admin_tools and i would file a bug report.

As a workaround you might remove the Media class and override dashboard.html to include your external files.

Django: django-admin-tools: adding custom js

2 Answers2