I didn’t think I would ever have sufficient motivation to learn JavaScript, but here I am. I worked a little more on that new FATE index page based on Google’s Visualization API. To that end, I constructed the following plan:

Part 1: Create A JSON Data Source
Create a JSON data source, now that I figured out how to do that correctly. JSON data really is just a JavaScript data structure. It can be crazy to look at since it necessitates packing dictionaries inside of arrays inside of dictionaries inside of arrays. (Check the examples– observe that the data structure ends with “}]}]}});”.) But in the end, the Google visualization knows what to do with it.

Done.

Part 2: Connect the JSON Data Source
Hook the JSON data source up to the newest revision of the FATE front page, rolled out a little while ago.

Done.

Part 3: Save The User’s Most Recent Sort Criteria
The problem is that the page resets the sort criteria on a refresh. There needs to be a way to refresh the page while maintaining that criteria. This leads me to think that I should have some “refresh” button embedded in the page which asks the server for updated data using a facility I have heard of named XMLHttpRequest. I found a simple tutorial on the matter but was put off by the passage “Because of variations among the Web browsers, creating this object is more complicated than it need be.”

Backup idea: Cookies. Using this tutorial as a guide, set a cookie whenever the user changes either the sort column or the sort order.

Done, though I may want to revisit the XHR idea one day.

Part 4: Make It Look Good
Finally, figure out how the div tag works to make the layout a little cleaner.

Done. Sort of. There are 2 div tags on the page now, one for the header and one for the table. I suppose I will soon have to learn CSS to really drag this page out of 1997.

Bonus: Caching the JSON Data
Ideally, the web browser makes the JSON data request using the If-Modified-Since HTTP header. Use a sniffer to verify this. If this is true, add a table to the FATE MySQL table which contains a single column specifying the timestamp when the web config cache table was last updated. If this time is earlier than the time in the request header, respond with a 304 (not modified) HTTP code.

Not done. It seems that these requests don’t set the appropriate HTTP header, at least not in Firefox.

I hope to put this page into service soon, just as soon as I can dump the rest of the existing index.php script into this new one. As usual, not elegant, but it works.