Overview
When customizing the Django Admin, for example a change_list.html template, you might want to add some JavaScript of your own. If you just chuck in your jQuery code, using the $ alias, to the {% block extrahead %} you'll probably see $ is not a function in your browser's Error Console.
If you just intend to use the jQuery that the admin is loading, you'll find it is loaded in the {{block.super}} line below. But, Django also clears the $ alias to jQuery when loading and sets up the only jQuery alias to django.jQuery.
Reclaiming the $ alias
Consider this block of code
{% block extrahead %}
{{ block.super }}
<script type="text/javascript">
function setClickEvents() {
$('a').click(function(event) {
alert('Clicked');
});
$(function() {
setClickEvents();
});
{% endblock %}
This will result in $ is not a function on a page reload. Add the line
var $ = django.jQuery to bring it back.
{% block extrahead %}
{{ block.super }}
<script type="text/javascript">
function setClickEvents() {
$('a').click(function(event) {
alert('Clicked');
});
var $ = django.jQuery;
$(function() {
setClickEvents();
});
{% endblock %}
Final thoughts
This works for me, but I can imagine there might be a case when you don't want to redfine $ like this. Afterall, Django is clearing it for a reason. This is alternative solution.
$(document).ready(function($) {
setClickEvents();
});
})(django.jQuery);
I'd like to add that some external plugins are already wrapping their code into an anonymous function, which, rather than "$", assumes "jQuery" to be available.
In that case you have to define "var jQuery = django.jQuery;" in a script block that precedes the external reference to that file.
Just found that out a minute ago :-)
- Danny Adairhttp://stackoverflow.com/questions/5484547/how-to-provide-to-third-party-external-jquery-plugins-in-django-admin
What I've seen around about Django redefining $ is that it does to prevent conflicts with prototype. Cause prototype also uses $(). ;)
- JaymeThank You!!
It helped so much!
I was stock for hours trying to figure out why $ can't work!!
Many Thanks Again.
- R