Oz Weather AJAX Refinements
Although Oz Weather is a fully functional app, as usual I feel driven to improve it further. So what is the next step? It is to improve the speed and efficiency (and hence user experience) by moving towards a purer AJAX implementation, and using whatever data compression is possible in delivering the data to the browser.
<meta http-equiv="Refresh" content="600" />
This forces a page refresh every 600 seconds (10 minutes), to ensure a fairly small time lag between data availability and the user’s view.
The first step was to create a PHP data query module, delivering the data in JSON format. For future flexibility (and readability), I also added an XML format option, of which a truncated example follows.
<?xml version="1.0"?> <forecast> <numdays>2</numdays> <day1> <date>2008-08-25</date> <dayname>Monday</dayname> <min>8</min> <max>18</max> <icon>34</icon> <desc>Fine. Partly cloudy.</desc> </day1> <day2> <date>2008-08-26</date> <dayname>Tuesday</dayname> <min>8</min> <max>20</max> <icon>32</icon> <desc>Fine. Mostly sunny.</desc> </day2> </forecast>
This all worked as expected. However, a few unforeseen problems arose, in particular relating to the –webkit-marquee CSS behaviour (also referred to in an earlier blog post). The problem is that the marquee behaviour only appears to work when the div using marquee in its CSS style is first rendered ie. when the page is first loaded or refreshed. But with the new AJAX version, no page reload occurs, even when the user selects a new city to display. Also, even altering the contents of the div doesn’t re-trigger the marquee motion. Eventually, though I found a workaround. The trick is to clone the div, and then replace the original div in the DOM model with the newly created clone. Sample code follows.
var pclone = element.cloneNode(true);
var parent = element.parentNode;
Note that the cloneNode call requires its “deepBoolean” parameter to be set to “true” in order to copy the text value from the source node.
Hopefully I will be able to post my solution in a future blog entry.