Using Django templates with jQuery AJAX
2009 January 6
I
recently discovered a neat way of displaying data retrieved using
jquery AJAX in concert with Django’s template engine. You can create a
view in Django which simply uses the render_to_response shortcut function to render the results server-side and then just use jquery.load to dynamically fetch the results.
Eventhough, returning some raw JSON data is much more efficient as far as bandwidth is concerned, method is a lot simpler.
I have been using jquery for over a year now. I have found that its
built-in DOM manipulation features are a bit limited, especially for
manipulating tables (e.g., adding rows dynamically). This method is
much cleaner than doing all that DOM manipulation.
Here is all the jQuery code to handle the search and AJAX spinner display:
01.$( document ).ready( function() {
02. $( '#searchSubmit' ).click( function() {
03. q = $( '#q' ).val();
04. $( '#results' ).html( ' ' ).load(
05. '{% url demo_user_search %}?q=' + q );
06. });
07.});
08.
09.$( document ).ajaxStart( function() {
10. $( '#spinner' ).show();
11.}).ajaxStop( function() {
12. $( '#spinner' ).hide();
13.});
Here is the Django view function that does the heavy lifting on the server-side:
01.def ajax_user_search( request ):
02. if request.is_ajax():
03. q = request.GET.get( 'q' )
04. if q is not None:
05. results = User.objects.filter(
06. Q( first_name__contains = q ) |
07. Q( last_name__contains = q ) |
08. Q( username__contains = q ) ).order_by( 'username' )
09.
10. template = 'results.html'
11. data = {
12. 'results': results,
13. }
14. return render_to_response( template, data,
15. context_instance = RequestContext( request ) )
Here are some screenshots of the results:
AJAX operation in progress
Returned results
No results
The sample Django project is included for your perusal and is released under the MIT license. I used the excellent Aptana Studio IDE when working on this demo so it can be imported straight into it as an Aptana project.
Download ajax_user_list.zip