Tuesday, September 11, 2012

Django Unobtrusive Ajax

It is very easy to make ajax enabled Django application, all you need is few additional attributes on the ‘form’ tag. ASP.NET already have unobtrusive jquery base ajax script, it’s a good idea to use same script since its already well tested, later on you could write your own script to tailor your needs. This script scans for data-ajax attribute on forms & anchors tags/elements and when user make any request, it goes as a asynchronous call. There are three different attributes that are required; first is off course data-ajax, second is data-ajax-mode which defines what to do with the result and third data-ajax-update is the target tag/element for the result set, as you can see in the following example.

<form action="/gettime/" method="get" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#divTime">
            <input type="submit" value="Get time through ajax"/>
<h3>Server Time</h3>
<div id="divTime"></div>

Clone Django ajax test project from github, it will give general idea or handling ajax calls: https://github.com/farazmasoodkhan/DjangoAjax

Unobtrusive Ajax Script: https://github.com/farazmasoodkhan/DjangoAjax/blob/master/django_ajax/static/lib/jquery.unobtrusive-ajax.js

Ajax Modes

There are three modes for result set to be placed in targeted element, which must be set in data-ajax-mode attribute:

1) Replace: Replace the entire content in targeted element

2) Before: Insert at top in the targeted element

3) After: Insert at the bottom in the targeted element


Ajax Events

Four events are available to subscribe through attributes of Ajax call:

1) data-ajax-begin: fired on the beginning of the request

2) data-ajax-complete: fired on the completion of the request

3) data-ajax-failure: fired on the failure of the request

4) data-ajax-success: fired on the success of the request


Loading Animation

You can set element id the data-ajax-loading="#loading" to display during Ajax call and data-ajax-loading-duration="2000" is the duration for the animation.


Graceful Degradation

You application should be able to handle non Ajax call if javascript is not enabled, so instead of settings ajax url in form’s action, you can set it in data-ajax-url. Alternatively you can also check for ajax call with in view method and act accordingly.

if request.is_ajax():
    return HttpResponse('<div>' + str(datetime.now()) +'</div>')

# Graceful degradation
return render_to_response('gettime.html', {'time': str(datetime.now()) })

1 comment:

  1. Original ASP.NET unobtrusive ajax library has many (few years well known :-( ) bugs.

    I wrote a small library 'Better Unobtrusive Ajax (not only for ASP.NET MVC)'. It can be found on https://github.com/dhlavaty/winf.unobtrusiveAjax.js It supports latest jQuery, has clean code and documentation. It is 100% compatible with Microsoft's original. If someone is interested or want to contribute, I will appreciate it.