HTML and CSS Reference
In-Depth Information
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
or
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
is 0.
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:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=utf-8 />
<title>HTML5 tweet time range</title>
