Greasemonkeying around with IRCTC
[Update 1/21/2008: Updated the script to handle availability URL change by IRCTC developers. If you've already installed the script, uninstall it (Tools->Greasemonkey->ManageUserScripts, select AJAXAvailability and click Uninstall), and install the updated script from the same location (http://senthil.thecoder.googlepages.com/ajaxavailability.user.js)]
For those of you who have not heard about Greasemonkey, it is a Firefox extension that "allows you to customize the way a webpage displays using small bits of JavaScript.". IRCTC (http://www.irctc.co.in/) is Indian Railways's website for booking tickets. While a huge improvement over standing in queue at railway stations, I would not consider it to be a well designed site - it doesn't stand up to heavy user load, and the interface is not very user friendly. For one, the HTML is absolutely nasty, with multiple <html> tags, multiple elements with the same id, etc.. For what I think is a bandwidth strapped site, the HTML has lots and lots of unnecessary whitespace and commented out HTML and it doesn't even use gzip encoding.
Enough ranting about that - Greasemonkey can't help there. What it can do is help manipulate the UI. My first target was the "Plan My Travel" page. After entering the source and destination stations, date of travel etc. and hitting "Find Trains", the page shows the list of trains that run between the stations on that day. So far, so good. Now, to book tickets on a train, the user selects a train and hits "Book Ticket". However, the user would typically have to check availability of tickets before proceeding to book them. The page makes it frustratingly difficult to do that - checking availability for a train takes two clicks, and worse, the availability information shows up on a new window, forcing the user to switch back and forth between the windows.
I decided to write a Greasemonkey script to show availability information right alongside the list of trains. I did not want to slow down loading of the page though, so I decided to do AJAX style dynamic loading of availability information. Here's how the page looks after enabling the script.
Notice how the new column blends in seamlessly with the rest of the page.
For the technically inclined, the script works by first adding a column to the train details table. It uses a XPath expression to get the list of train numbers from the HTML content and then queries availability information from the server by generating the same query string that a click on the "Show Availability" button generates. The difference is that it does it automatically for all trains in the page and that it uses GM_xmlhttpRequest to do the query asynchronously - which means that the script queries availability for trains (almost) simultaneously.
From here, it's fairly simple - another XPath expression "screen scrapes" the availability string from the HTML content returned by the server and there is some code to update the cell's contents with the string. The script handles failures also - for HTTP failures, it retries the request and for other kind of failures, it shows a "Query Failed" link, which, when clicked, shows the actual error in a messagebox (another XPath expression takes care of scraping the error text).
To install the script, install Greasemonkey first (if you haven't already), navigate to http://senthil.thecoder.googlepages.com/ajaxavailability.user.js and click Install. The next time you visit IRCTC's website and go to the "Plan My Travel" page, the script gets loaded and runs automatically.
While you're at it, you might also find SortItOut, a script for sorting the availability table (shown above), useful.
Hope you guys find the scripts useful.