Wednesday, February 15th, 2012

Django and jQuery

Are you a fan of Web2py because it comes packed with nice included templates to get you started quickly? I for one love the effects for when messages in web2py, where they fade in and out elegantly. This functionality is easily done using Django and it's template system. I am not placing this in the tutorials section, as this is a rather simple example to get people started, rather than a full-on tutorial.

First, you will need a base template for your website which will in charge of displaying these jQuery message affects. It will use the Django messages framework, so everything will come together nicely from any plugable Django apps you may have, including the admin app.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
..... SNIP .....
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#messages').click(function(event){
    $('#messages').fadeOut();
  });
  $('#messages').hide();
{% if messages %}
  {% for message in messages %}
  $('#messages').append('<div>{{message}}</div>');
  {% endfor %}
  $('#messages').fadeIn();
{% endif %}
</script>
...
</head><body>
...
<div id="messages"></div>
...
</body></html>

This is just one way of doing this, you could read and output the messages in the body part of the template, but I like to keep all the code together. My actual implementation uses jQueryUI rather than standard jQuery, and uses other animations and jQueryUI's CSS to make it look really slick. This can be done in any template language, but the example above is specific for Django. Each web framework will have it's own method of retrieving the messages from the stack.

Django should ship with a set of default templates, as this is where web2py shines when it comes to getting started right away. I prefer to work on the backend Python code before having to deal with the HTML/CSS/JS files. Django not having a set of default templates for forms, CRUD, and the various included frameworks makes working with Django initially very tedious. Once a Django site has it's templates built, I find adding and extending the site to be a breeze, the only problem for me is getting the template ready before I can actually begin work... Django has a really awesome template system which supports overriding templates with zero effort, and it should be a no brainer to include some sort of default template set to get Python programmers up and running faster.

Comment #1: Posted 2 years, 9 months ago by L.Plant.98

Your code contains a bug if 'message' happens to contain the ' character, and potentially an XSS attack if it contains data that comes from the user.

It also makes it harder to pull out the javascript into its own file this way, and doesn't score so well in terms of graceful degradation if javascript fails for any reason.

Much better to include the message it in the HTML part of the template in the normal way! Django's XSS protection (automatic escaping in the templates) is designed to make HTML generation safe (and even there it's not perfect), but isn't designed to make Javascript generation safe.

Comment #2: Posted 2 years, 9 months ago by Kevin Veroneau

Yes, I agree with you. I normally do not store user submitted data in a message, and most of the site which uses the above code requires javascript. For my use case, it works fine and shouldn't cause any harm. For sites which wish to keep backwards compatibility with Lynx for example, or NoScript add-ons, should add the messages into the HTML. If you plan on allowing unfiltered user input in your messages, then placing the message in the HTML is best. However, django does auto escape, so if a message did have a ' character, it shouldn't do any harm. I have previously played around with user input being used in the messages.

About Me

My Photo
Names Kevin, hugely into UNIX technologies, not just Linux. I've dabbled with the demons, played with the Sun, and now with the Penguins.




Kevin Veroneau Consulting Services
Do you require the services of a Django contractor? Do you need both a website and hosting services? Perhaps I can help.

This Month

If you like what you read, please consider donating to help with hosting costs, and to fund future books to review.

Python Powered | © 2012-2014 Kevin Veroneau