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
- A webserver which allows you to execute CGI scripts (we'll use Python CGI, to be exact, although you could potentially use any language you're familiar with).
- Access to an SMTP server for actually sending the email out (this can likely be done with your regular email account).
- The jQuery JavaScript library.
- A Python interpreter.
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:
- These days the email harvesters are running rampant on the internet, a contact form like this might make displaying your address unnecessary.
- The visitor wont need to interrupt their browsing, no need for copy/pasting the address or opening up a separate window or program to send you an email.
- We could include fields for information the user might mistakenly forget to supply us in a regular email (depending on the purpose of the form).
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
Demo is now offline.
a demo
of this in action, spruced up a (very tiny) bit with a 'progress bar'.
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!