benpoole/websql-example.html

## websql-example.html
<!DOCTYPE HTML>
<html>
	<!--
		@author Ben Poole, http://benpoole.com
		Example HTML5 code for playing with the local WebKit (Opera too?) SQL database.
		@see http://benpoole.com/weblog/201106222227
	-->
	<head>
	<meta charset="UTF-8" />
	<title>Winkles Of The World Unite!</title>

	<style type="text/css">
		body {font-family: Helvetica, sans-serif; font-size: 100%; line-height: 1.4em}
		input, button {width: 25em; font-size: 100%; padding: .25em}
	</style>

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		// Generic error callback for db transactions
		var errCallback = function(){
			alert("Oh noes! There haz bin a datamabase error!");
		}

		// Open / initialise the db - this will fail in browsers like Firefox & IE
		var db = openDatabase("winkles", "1.0", "Winkles Of The World", 32678);

		// Create winkles table if required
		db.transaction(function(transaction){
			transaction.executeSql("CREATE TABLE IF NOT EXISTS winkles (" +
				"id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT," +
				"winklename TEXT NOT NULL, location TEXT NOT NULL);");
		});

		// This is the SAVE function
		var saveWinkle = function(winklename, location, successCallback){
			db.transaction(function(transaction){
				transaction.executeSql(("INSERT INTO winkles (winklename, location) VALUES (?, ?);"),
				[winklename, location], function(transaction, results){successCallback(results);}, errCallback);
			});
		};

		// This is a LOAD function, which pulls all winkles for a given location
		var loadWinkles = function(location, successCallback){
			db.transaction(function(transaction){
				transaction.executeSql(("SELECT * FROM winkles WHERE location=?"), [location],
					function(transaction, results){successCallback(results);}, errCallback);
				});
		};

		// Document ready event. Time for some subversive injection, hurr hurr
		$(function(){
			var form = $("form");

			// Callback when loading data (@see showWinkles())
			var updatePage = function(results){
				var list = $("#winkle-list");
				list.empty();
				console.dir(results);
				if (results.rows.length==0){
					alert("Alas, there be no winkles here.");
				} else {
					$.each(results.rows, function(rowIndex){
						var row = results.rows.item(rowIndex);
						list.append( "<li>" + row.winklename + ", " + row.location + "</li>");
					});
				}
			};

			// Override the default form submit in favour of our code
			form.submit(function(event){
				event.preventDefault();
				saveWinkle($('#winklename').val(), $('#location').val(), function(){
					alert($('#winklename').val() + "'s data has been saved!");
				})
			});

			// Bind winkle listing to a button in the page
			$('#show-me').click(function(){loadWinkles($('#where').val(), updatePage);});
		});
	</script>
</head>

<body>
	<h1>Winkles Of The World Unite</h1>
	<p>This wee bit of example code accompanies the blog post, <cite><a href="http://benpoole.com/weblog/201106222227">Off-line web apps: local Web SQL &amp; Javascript</a></cite> over at <a href="http://benpoole.com">benpoole.com</a>.</p>

	<form>
		<h2>Winkle name &amp; location:</h2>
		<p><input type="text" id="winklename" name="winklename" class="name" placeholder="Winkle name here" /></p>
		<p><input type="text" id="location" name="location" class="location" placeholder="Winkle location here" /></p>
		<p><input type="submit" value="Save this winkle" /></p>
	</form>

	<p>Type in a location below &amp; then click the button to see what we&#8217;ve got:</p>
	<p><input id="where" name="where" placeholder="Location to check for winkles" /></p>
	<p><input type="button" id="show-me" value="Show me the winkles!" /></p>

	<h2>Winkle list</h2>
	<ul id="winkle-list"><!-- set by updatePage() --></ul>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<!--
	@author Ben Poole, http://benpoole.com
	Example HTML5 code for playing with the local WebKit (Opera too?) SQL database.
	@see http://benpoole.com/weblog/201106222227
	-->
	<head>
	<meta charset="UTF-8" />
	<title>Winkles Of The World Unite!</title>

	<style type="text/css">
	body {font-family: Helvetica, sans-serif; font-size: 100%; line-height: 1.4em}
	input, button {width: 25em; font-size: 100%; padding: .25em}
	</style>

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	// Generic error callback for db transactions
	var errCallback = function(){
	alert("Oh noes! There haz bin a datamabase error!");
	}

	// Open / initialise the db - this will fail in browsers like Firefox & IE
	var db = openDatabase("winkles", "1.0", "Winkles Of The World", 32678);

	// Create winkles table if required
	db.transaction(function(transaction){
	transaction.executeSql("CREATE TABLE IF NOT EXISTS winkles (" +
	"id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT," +
	"winklename TEXT NOT NULL, location TEXT NOT NULL);");
	});

	// This is the SAVE function
	var saveWinkle = function(winklename, location, successCallback){
	db.transaction(function(transaction){
	transaction.executeSql(("INSERT INTO winkles (winklename, location) VALUES (?, ?);"),
	[winklename, location], function(transaction, results){successCallback(results);}, errCallback);
	});
	};

	// This is a LOAD function, which pulls all winkles for a given location
	var loadWinkles = function(location, successCallback){
	db.transaction(function(transaction){
	transaction.executeSql(("SELECT * FROM winkles WHERE location=?"), [location],
	function(transaction, results){successCallback(results);}, errCallback);
	});
	};

	// Document ready event. Time for some subversive injection, hurr hurr
	$(function(){
	var form = $("form");

	// Callback when loading data (@see showWinkles())
	var updatePage = function(results){
	var list = $("#winkle-list");
	list.empty();
	console.dir(results);
	if (results.rows.length==0){
	alert("Alas, there be no winkles here.");
	} else {
	$.each(results.rows, function(rowIndex){
	var row = results.rows.item(rowIndex);
	list.append( "<li>" + row.winklename + ", " + row.location + "</li>");
	});
	}
	};

	// Override the default form submit in favour of our code
	form.submit(function(event){
	event.preventDefault();
	saveWinkle($('#winklename').val(), $('#location').val(), function(){
	alert($('#winklename').val() + "'s data has been saved!");
	})
	});

	// Bind winkle listing to a button in the page
	$('#show-me').click(function(){loadWinkles($('#where').val(), updatePage);});
	});
	</script>
	</head>

	<body>
	<h1>Winkles Of The World Unite</h1>
	<p>This wee bit of example code accompanies the blog post, <cite><a href="http://benpoole.com/weblog/201106222227">Off-line web apps: local Web SQL & Javascript</a></cite> over at <a href="http://benpoole.com">benpoole.com</a>.</p>

	<form>
	<h2>Winkle name & location:</h2>
	<p><input type="text" id="winklename" name="winklename" class="name" placeholder="Winkle name here" /></p>
	<p><input type="text" id="location" name="location" class="location" placeholder="Winkle location here" /></p>
	<p><input type="submit" value="Save this winkle" /></p>
	</form>

	<p>Type in a location below & then click the button to see what we’ve got:</p>
	<p><input id="where" name="where" placeholder="Location to check for winkles" /></p>
	<p><input type="button" id="show-me" value="Show me the winkles!" /></p>

	<h2>Winkle list</h2>
	<ul id="winkle-list"><!-- set by updatePage() --></ul>
	</body>
	</html>