HTML and CSS Reference
3. Loop through the results constructing the HTML, and then
set it to the tweetEl (a <ul> element) innerHTML
There's two states the SQL query can be, either:
SELECT * FROM tweets
SELECT * FROM tweets WHERE date > strftime(“%s”, “now”,
¬ “-5 minutes”)
Where I've put -5 minutes, this can change to -30 minutes or
any number that's passed in to the show function. The strftime
SQLite function is generating the number of seconds from 1-Jan-
1970 until “now” minus N minutes. Since the “date” fi eld is being
stored as an integer, you're now able to grab all the rows that
were tweeted within the last N minutes.
Now you've used the third argument to the executeSql method,
the success callback. The success callback receives a transac-
tion object ( just as the transaction callback does so you could
run another executeSql if you wanted), and more importantly, the
result set. The result set contains three attributes:
1. insertId (set only if you've inserted a row or rows)—I didn't
use this in this example.
2. rowsAffected —Since this is a SELECT statement, this value
3. rows —This isn't an array, it's a collection, that does contain
a length and item getter method. You make use of the rows
object, and run a for loop from 0 to the length of the rows,
and use results.rows.item(i) to get the individual rows.
The individual row is an object representing the different
column names, so results.rows.item(0).screen_name gives
us the screen_name fi e fi d fi r o m t h e fi r s t r o w .
Finally, once you have looped through all the rows that match,
you can set a <ul> element to the HTML you've built up. In this
example, the <ul> is stored in the variable called tweetEl .
Here is the complete code listing, which includes the database
support detection and the click handler code for the radio buttons:
<meta charset=utf-8 />
<title>HTML5 tweet time range</title>