More greasemonkeying with IRCTC

Senthil — Wed, 26 Dec 2007 08:09:00 GMT

I'm glad that a lot of people found AJAXAvailability useful. For people who haven't heard about it, AJAXAvailability is a Greasemonkey script for IRCTC's website that loads availability information asynchronously and shows it in the availability table, right alongside the list of trains (more information here).

Mani suggested that the ability to sort the availability table based on departure time would be useful. That seemed like a nice idea, so here it is - SortItOut, a Greasemonkey script that modifies the availability table and makes the header texts clickable. Clicking on one of the headers, say "Departure time", sorts the table by the values in that column, in ascending order.Greasemonkey script to do that.

Clicking on the same header again will sort the table in descending order.

You can sort by any column, except the one with radio buttons ("Select"). This script also works nicely with AJAXAvailability, in that it allows you to sort the table even when availability information is loading (unless you are sorting the table by availability information, of course).

To install the script, install Greasemonkey first (if you haven't already), navigate to SortItOut 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.

That's all, folks - the rest of the post is about the technical details of how the script works, feel free to skip it if you're not interested.

The script works by getting the availability table's DOM object through an XPath expression and replacing the cells of the first row with dynamically created anchor elements. The click event of those elements are hooked up to a function that then sorts the table, based on the column's values. The sort function is pretty simple - it creates an array of objects, one object per row. Each object holds a reference to it's row and a reference to the value of the column in that row, on which the sort must be done.

The script then uses the Array.sort library function to do the sorting and then rearranges the rows in the table based on the sorted result. There are quite a few ways of rearranging the table -

1. Replace the existing HTML in each row with the HTML of the row to-be

2. Remove all rows in the table and create new rows and cells, based on the sorted output.

3. Use Greasemonkey's insertBefore to switch around "TR" DOM objects.

The first approach wouldn't work with AJAXAvailability. That script stores references to "TD" DOM elements, for updating availability information in the AJAX callback. Replacing the innerHTML of the table's rows would create new TD objects, breaking that script. There was another subtle problem when I tried doing this - my sorted array and the actual table hold references to the same TR DOM objects, so replacing the HTML in the table would also affect the sorted output.

The second approach will not work for the same reason - new TD elements will be created, and the AJAXAvailability script will update the now obsolete TD elements.

The third approach works because no new objects are created, existing TR objects are shunted around, based on the sorted output. This was also the simplest to code as well. Doesn't it feel great, when the best solution is the simplest and cleanest one as well?

Greasemonkeying around with IRCTC

Senthil — Sat, 10 Nov 2007 13:26:00 GMT

[Update 12/19/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://senthilthecoder.com/software/irctcscripts/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.

the blog => anything goes : IRCTC AJAX Javascript

More greasemonkeying with IRCTC

Greasemonkeying around with IRCTC