Web Dynamism w/Python+jQuery - Part 1  April 16th, 2008

This is part 1 of a 3 part series. Check out part 2 and part 3.

Having a static, standards compliant, flat-file website isn't a bad thing. But sometimes it's nice to inject a little bit of life into a page or two. Not only can it help keep things interesting but it might substantially increase usability as well.

Prerequisites

If you're running your own server then you'll likely need to do some configuration (generally it comes down to adding a line like AddHandler cgi-script .py to your Apache httpd.conf file, for other webservers and platforms, ask Google). Otherwise, this stuff is probably already done for you, consult the documentation for your web host for the correct location to put CGI files.

Note: Some visitors might not have JavaScript enabled in their browser, though these days that's almost unheard of -- still, the problem with using a library like jQuery is that nothing you do with it will work on a browser without JavaScript. While we can handle this problem by being careful to support 'gracefully degradation', it's worth pointing out that it defeats the 'dynamic' part of this exercise.

So let's invent an example and see what happens.

The Example

Maybe we want a little contact form on your site which a visitor could use to send you an email. This could be handy for several reasons:

Let's start by writing the form. Let's say we'd like the visitor's name, their email address (so we can reply, but this will be optional), a drop-down to select what the comment is regarding, and the comment itself.

The Form

The name= fields here are how we'll access these values once we get to the CGI side. This is a pretty typical form with the only interesting part being action="/cgi-bin/comment.py". The actual path may be different depending on your hosting, so adjust accordingly. Of course there is no comment.py just yet! So let's write it right now.

The Python CGI

So at this point we should already have it working. If you throw the form into a page, have the paths setup correct and so on, and press submit -- you'll get a new page with the result, and the URL will be that of your actual Python script. Refreshing will attempt to submit the same data again (aka, it will send another email).

The next step is to make it dynamic. Since we don't want to actually go to the Python script, we just want it to do some work and give us a result asynchronously. Fortunately this last step is the easiest part. All we need to do is have jQuery send the form for us, instead of the browser.

The JavaScript

This code fades out the form itself, gets the data and the URL of our Python CGI, then it does the POSTing asynchronously and inserts a div in the page with the message.

The nice thing about this is that if the user doesn't have JavaScript enabled they still get the original behavior! This is because we added a parameter to our data as part of the JavaScript. If the Python script sees the async parameter then it will assume we're doing this processing via JavaScript (which we are) and return content of the text/plain type. Which we then capture in the success: function and push onto the page.

The Demo

If you're having trouble you can take a look at a demo of this in action, spruced up a (very tiny) bit with a 'progress bar'. Demo is now offline.

In the example I've artificially increased the time it takes for Python to do it's work. If you're doing a very small amount of work (in the case of the example, I'm not really sending an email at all), the result will seem to appear instantly, which doesn't look as cool in the example.

Try it with and without JavaScript enabled to get an idea of how it works and view the source to see the code, it's almost the same as what's listed here.

The Rest

All said and done this is a pretty simple use of JavaScript/jQuery made a little bit more interesting by using Python's CGI capabilities.

The best thing about this example is that is demonstrates how you might actually use Python and jQuery to make a real website more dynamic. Not all 'Web 2.0' or 'AJAX' functionality is entirely superfluous.

More articles showing off Python+jQuery coming soon!

Some social stuff: