I've created a django app which integrate jQuery.

It might seems trivial, however bear with me I can assure you there is some goodies bundled in this app.

Serving

A template tag was created to easily load any version of jQuery, locally or remotely:

{% jquery_script %}
<script type="text/javascript" src="/jq-media/jquery/1.3/jquery.js"></script>

{% jquery_script "1.2.6" %}
<script type="text/javascript" src="/jq-media/jquery/1.2.6/jquery.js"></script>

{% jquery_script "1.3" 1 %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>

URL dispatcher

This is my favorite part :)

I've included a small JavaScript script which allow to work with Django's named URLs on the client side. It resolve a lot of annoying issues when working with medium to large Django projects which involve lots of JavaScript.

As is there is no mechanism to achieve that. It forces us to hardcode our URLs in JavaScript, which of courses leads to unpredictable problems when URLs gets moved around. On the server side, if you used named URLs properly, you can change your URLs like you want without breaking your app, however they will not be updated on the client side.

It also becomes a problem when your root URL isn't necessarily "/" in production and in development.

Consider the following URLs:

urlpatterns = patterns('myProject.main.views',
    url(r'^$', 'home', name='home'),
    url(r'^/view/contact/(\d+)/$', 'view_contact', name='view-contact'),
    url(r'^/calendar/(?P<year>\d{4})/$', 'view_calendar', name='view-calendar'),
)
</year>

Now let's forget the parsing bug in my code highlight that puts a </year> at the end and imagine that you want to access the view-contact view with an Ajax call.

The conventional way to achieve this would looks something like this;

$('#contact-div').load('/view/contact/'+ contact.id +'/');

If the URL gets changed to let's say *'^/contact/view/(d+)/$'*. This JavaScript code will break.

If your root URL is / in development and /something/ in prod, this JavaScript will not work in production.

My script resolve this issue gracefully while being more coherent with Django:

$('#contact-div').load($.url('view-contact', contact.id));

The script also support named arguments:

$('#calendar').load($.url('view-calendar', {year: 2009}));

To make this work you only have one template tag to add to your base.html:

{% jquery_urls %}

Developpment roadmap

As now there is still jQuery UI to integrate, beside that the core features I wanted are almost all there.

I'm juggling with the idea of creating custom form widgets for jQuery UI widgets, but I'm still not sure it would be a great added value nor that it would be optimal.

I'm not sure if I will our should bundle a default jQuery UI theme..

Any inputs/feedbacks are welcome.

Special thanks to gnuvince for the help with the URL dispatcher. Cheers to everybody at Web Hosting Search for their help.

Links

• Project documentation
• Project source
• Project page