I'm playing with the inplete example found at /
But I'm distressed to see ments in it like:
"renders the note somewhere", and
"report error", and
"// …"
So, will someone please help me write a valid example? Here's what I've got so far:
<!DOCTYPE HTML>
<html manifest="cache-manifest">
<head>
<script>
var db = openDatabase("notes", "", "The Example Notes App!", 1048576);
function renderNote(row) {
// renders the note somewhere
}
function reportError(source, message) {
// report error
}
function renderNotes() {
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)',
[]);
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
for(var i = 0; i < rs.rows.length; i++) {
renderNote(rs.rows[i]);
}
});
});
}
function insertNote(title, text) {
db.transaction(function(tx) {
tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
function(tx, rs) {
// …
},
function(tx, error) {
reportError('sql', error.message);
});
});
}
</script>
<style>
label {
display:block;
}
</style>
</head>
<body>
<form>
<label for="mytitle">Title:</label>
<input name="mytitle">
<label for="mytext">Text:</label>
<textarea name="mytext"></textarea>
<!-- There is no submit button because I want to save the info on every keystroke -->
</form>
</body>
</html>
I also know that I have to incorporate this in there somewhere:
if (navigator.onLine) {
// Send data using XMLHttpRequest
} else {
// Queue data locally to send later
}
But I'm not sure what even I would tie that too.
I'm playing with the inplete example found at http://www.w3/TR/offline-webapps/
But I'm distressed to see ments in it like:
"renders the note somewhere", and
"report error", and
"// …"
So, will someone please help me write a valid example? Here's what I've got so far:
<!DOCTYPE HTML>
<html manifest="cache-manifest">
<head>
<script>
var db = openDatabase("notes", "", "The Example Notes App!", 1048576);
function renderNote(row) {
// renders the note somewhere
}
function reportError(source, message) {
// report error
}
function renderNotes() {
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)',
[]);
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
for(var i = 0; i < rs.rows.length; i++) {
renderNote(rs.rows[i]);
}
});
});
}
function insertNote(title, text) {
db.transaction(function(tx) {
tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
function(tx, rs) {
// …
},
function(tx, error) {
reportError('sql', error.message);
});
});
}
</script>
<style>
label {
display:block;
}
</style>
</head>
<body>
<form>
<label for="mytitle">Title:</label>
<input name="mytitle">
<label for="mytext">Text:</label>
<textarea name="mytext"></textarea>
<!-- There is no submit button because I want to save the info on every keystroke -->
</form>
</body>
</html>
I also know that I have to incorporate this in there somewhere:
if (navigator.onLine) {
// Send data using XMLHttpRequest
} else {
// Queue data locally to send later
}
But I'm not sure what even I would tie that too.
Share Improve this question asked Feb 24, 2010 at 18:43 Phillip SennPhillip Senn 47.6k91 gold badges260 silver badges378 bronze badges 2- 6 I would advise against saving to the DB on every keystroke. Use setTimeout to trigger a save n seconds after the user has paused his/her typing. Otherwise network latency will make typing a nightmare. Myself, I would put the save into an onblur handler for each input. – Robusto Commented Mar 1, 2010 at 18:38
- Thanks Robusto for the ment. – Phillip Senn Commented Mar 1, 2010 at 22:54
2 Answers
Reset to default 10It looks to me like you are after something along the lines of
function save() {
if (navigator.onLine) {
// Send data using XMLHttpRequest
} else {
// Queue data locally to send later
}
}
<textarea name="mytext" onkeyup="save();"></textarea>
However, use a timeout like Robusto mentioned (which, I think, is also the way that GMail does things).
If its the "renders note somewhere", etc. that you are worried about, that part is for you to fill in. You will have to fill this in by selecting data out of the database, and then filling it into an element on your page.
function renderNote(row) {
$('notes').innerHtml = $('notes').innerHtml + row.body;
}
This is the best that I can work out from what the spec currently says - note, however, that the spec is currently inplete and you won't be able to find a final version of it on the w3 site yet.
If you are curious as to how to queue up the data locally, even an array should do for this. Push each local request onto the end of the array (and presumably save it locally at the same time) and check periodically for an active internet connection. If the internet connection is available, repeatedly pop the top element off the array and send it over the net until the array is empty.
if navigator.online you could sync your local db with an online repository, you'd probably not need the 'else' as you're already storing locally. it might be better though to instead add eventlisteners (on the window object) for 'offline' and 'online' events and trigger (and cancel) syncing using those events.
check out example of online/offline state handling on this hacks.mozilla page and look at this ajaxian article about the webkit stickynotes html5-implementation (which does not sync when online though)