More greasemonkeying with IRCTC
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?