Create a gist now

Instantly share code, notes, and snippets.

<!doctype html>
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src=""></script>
var SightingObject;
var db;
function errorCB(e) {
//We should do something here - the database isn't technically required per se, but it should
console.log("DB Error");
function online() {
//return false;
return navigator.onLine;
$(document).ready(function() {
//initialize db
db = window.openDatabase("sightingdb", "1.0", "Sighting Database", 200000);
db.transaction(createDB, errorCB, initApp);
function createDB(trans) {
trans.executeSql("create table if not exists sighting(id INTEGER PRIMARY KEY,numufos,yourname,description)");
I'm run after the db is setup.
function initApp() {
if(online()) {
Parse.initialize("8Y0x2rCA0jKYdiC7wLKQuF9nQqKGFKdpqUHMfue3", "8m7ng0w9UirTV6k4ExsJ0WsmPGeZMsJd5hcu54Oq");
SightingObject = Parse.Object.extend("SightingObject");
//do we have existing objects in the db we can upload?
db.transaction(function(trans) {
trans.executeSql("select * from sighting", [], function(trans,result) {
//do we have rows?
if(result.rows.length > 0) {
console.log("Ok, we need to push stuff up");
for(var i=0, len=result.rows.length; i<len; i++) {
var row = result.rows.item(i);
(function(row) {
//Parse will try to save everything, including ID, so make a quick new ob
var report = {};
report.numufos = row.numufos;
report.yourname = row.yourname;
report.description = row.description;
saveToParse(report, function() {
console.log("i need to delete row ";
db.transaction(function(trans) {
trans.executeSql("delete from sighting where id = ?", []);
}, errorCB);
}, errorCB, function() {
console.log("Done uploading the old rows");
$("#sightForm").on("submit", function(e) {
gather the values - normally we'd do a bit of validation, but since UFO chasers
are known for their rigorous and rational pursuit of science, this will not be necessary
var report = {};
report.numufos = $("#numufos").val();
report.yourname = $("#yourname").val();
report.description = $("#description").val();
console.log("To report: ",report);
//ok, disable the form while submitting and show a loading gfx
if(online()) {
console.log("I'm online, send to parse");
} else {
console.log("I'm offline, save to WebSQL");
db.transaction(function(trans) {
trans.executeSql("insert into sighting(numufos,yourname,description) values(?,?,?)", [report.numufos, report.yourname, report.description]);
}, errorCB, resetForm);
function saveToParse(ob,successCB) {
var sightingObject = new SightingObject();, {
success: function(object) {
console.log("Saved to parse.");
error: function(model, error) {
//handles removing the disabled form stuff and loading gfx
function resetForm() {
var status = $("#status");
if(online()) {
status.fadeIn().html("Your sighting has been saved!").fadeOut(4000);
} else {
status.fadeIn().html("Your sighting has been saved locally and will be uploaded next time you are online!").fadeOut(4000);
body {
margin-left: 25px;
margin-right: 25px;
font-family: arial;
input {
width: 100%;
height: 25px;
textarea {
width: 100%;
#loadingGraphic {
left: 50%;
top: 50%;
#status {
padding: 10px;
<h2>Sighting Reporter</h2>
<form id="sightForm">
Number of UFOs: <input type="number" id="numufos"><br/>
Your Name: <input type="text" id="yourname"><br/>
Description: <textarea id="description"></textarea><br/>
<input type="submit" value="Send Sighting">
<div id="status"></div>
<img src="ajax-loader.gif" style="" id="loadingGraphic">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment