Hagith · September 7, 2016 19:00
diff --git a/indexedDB_example.html b/indexedDB_example.html
 <!DOCTYPE html>
 <html>

 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script>
 var db;

 // https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB
 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

 $(document).ready(function() {

 	var openRequest = indexedDB.open("notes",5);

 		//handle setup
 		openRequest.onupgradeneeded = function(e) {

 			console.log("running onupgradeneeded");
 			var thisDb = e.target.result;

 			//temp delete
 			//thisDb.deleteObjectStore("note");

 			//Create Note
 			if(!thisDb.objectStoreNames.contains("note")) {
 				console.log("I need to make the note objectstore");
 				var objectStore = thisDb.createObjectStore("note", { keyPath: "id", autoIncrement:true });  
 				objectStore.createIndex("title", "title", { unique: false });
 			}


 		}

 		openRequest.onsuccess = function(e) {
 			db = e.target.result;

 			db.onerror = function(event) {
 			  // Generic error handler for all errors targeted at this database's
 			  // requests!
 			  alert("Database error: " + event.target.errorCode);
 			  console.dir(event.target);
 			};

 			displayNotes();

 		}

 		function displayNotes() {

 			var transaction = db.transaction(["note"], IDBTransaction.READ);  
 			var content="<ul>";

 			transaction.oncomplete = function(event) {
 	  			console.log("All done!");
 	  			$("#noteList").html(content);
 			};

 			transaction.onerror = function(event) {
 			  // Don't forget to handle errors!
 			  console.dir(event);
 			};

 			var objectStore = transaction.objectStore("note");

 			objectStore.openCursor().onsuccess = function(event) {  
 			  var cursor = event.target.result;  
 			  if (cursor) {  
 			  	content += "<li data-key=\""+cursor.key+"\"><span class=\"label\">"+cursor.value.title+"</span>";
 			  	content += " <a class=\"delete\">[Delete]</a>";
 			  	content +="</li>";
 			    cursor.continue();  
 			  }  
 			  else {  
 			  	content += "</ul>";
 			  	console.log("Done with cursor");
 			  }  
 			};  

 		}

 		$("#noteList").on("click", "a.delete", function(e) {
 			e.preventDefault();
 			var thisId = $(this).parent().data("key");
 			console.log("delete "+thisId);

 			var request = db.transaction(["note"], IDBTransaction.READ_WRITE)  
 			                .objectStore("note")  
 			                .delete(thisId);  
 			request.onsuccess = function(event) {  
 				displayNotes();
 			};  

 			return false;
 		});

 		$("#noteList").on("click", "li", function() {
 			var thisId = $(this).data("key");
 			var transaction = db.transaction(["note"]);  
 			var objectStore = transaction.objectStore("note");  
 			var request = objectStore.get(thisId);  
 			request.onerror = function(event) {  
 			  console.dir(event);
 			};  
 			request.onsuccess = function(event) {  
 			  var note = request.result;
 			  $("#noteDetail").html("<h2>"+note.title+"</h2><p>"+note.body+"</p>");
 			};  
 		});

 		//TEMP TO REMOVE
 		$("#addNoteButton").click(function() {

 			var title = $("#title").val();
 			var body = $("#body").val();
 			
 			var request = db.transaction(["note"], IDBTransaction.READ_WRITE)
 							.objectStore("note")
 							.add({title:title,body:body});

 			request.onsuccess = function(event) {
 				$("#title").val("");
 				$("#body").val("");
 				displayNotes();
 			};

 			return false;
 		});

 });

 </script>
 <style>
 #noteList li span.label {
 	cursor:pointer;
 }
 a.delete {
 	color:red;
 	font-size:.6em;
 	cursor: pointer;
 }
 </style>
 </head>

 <body>

 	<h2>Notes</h2>

 	<div id="noteList"></div>
 	<div id="noteDetail"></div>

 	<h2>Add Note</h2>
 	<form>
 	<input type="text" id="title" placeholder="Title" required><br/>
 	<textarea id="body" placeholder="Enter body here..." required></textarea>
 	<p>
 	<button id="addNoteButton">Save Note</button>
 	</p>
 	</form>

 </body>
 </html>

 <!-- test change -->
	<!DOCTYPE html>
	<html>

	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	var db;

	// https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB
	var indexedDB = window.indexedDB \|\| window.webkitIndexedDB \|\| window.mozIndexedDB \|\| window.msIndexedDB;
	var IDBTransaction = window.IDBTransaction \|\| window.webkitIDBTransaction;

	$(document).ready(function() {

	var openRequest = indexedDB.open("notes",5);

	//handle setup
	openRequest.onupgradeneeded = function(e) {

	console.log("running onupgradeneeded");
	var thisDb = e.target.result;

	//temp delete
	//thisDb.deleteObjectStore("note");

	//Create Note
	if(!thisDb.objectStoreNames.contains("note")) {
	console.log("I need to make the note objectstore");
	var objectStore = thisDb.createObjectStore("note", { keyPath: "id", autoIncrement:true });
	objectStore.createIndex("title", "title", { unique: false });
	}


	}

	openRequest.onsuccess = function(e) {
	db = e.target.result;

	db.onerror = function(event) {
	// Generic error handler for all errors targeted at this database's
	// requests!
	alert("Database error: " + event.target.errorCode);
	console.dir(event.target);
	};

	displayNotes();

	}

	function displayNotes() {

	var transaction = db.transaction(["note"], IDBTransaction.READ);
	var content="<ul>";

	transaction.oncomplete = function(event) {
	console.log("All done!");
	$("#noteList").html(content);
	};

	transaction.onerror = function(event) {
	// Don't forget to handle errors!
	console.dir(event);
	};

	var objectStore = transaction.objectStore("note");

	objectStore.openCursor().onsuccess = function(event) {
	var cursor = event.target.result;
	if (cursor) {
	content += "<li data-key=\""+cursor.key+"\"><span class=\"label\">"+cursor.value.title+"</span>";
	content += " <a class=\"delete\">[Delete]</a>";
	content +="</li>";
	cursor.continue();
	}
	else {
	content += "</ul>";
	console.log("Done with cursor");
	}
	};

	}

	$("#noteList").on("click", "a.delete", function(e) {
	e.preventDefault();
	var thisId = $(this).parent().data("key");
	console.log("delete "+thisId);

	var request = db.transaction(["note"], IDBTransaction.READ_WRITE)
	.objectStore("note")
	.delete(thisId);
	request.onsuccess = function(event) {
	displayNotes();
	};

	return false;
	});

	$("#noteList").on("click", "li", function() {
	var thisId = $(this).data("key");
	var transaction = db.transaction(["note"]);
	var objectStore = transaction.objectStore("note");
	var request = objectStore.get(thisId);
	request.onerror = function(event) {
	console.dir(event);
	};
	request.onsuccess = function(event) {
	var note = request.result;
	$("#noteDetail").html("<h2>"+note.title+"</h2><p>"+note.body+"</p>");
	};
	});

	//TEMP TO REMOVE
	$("#addNoteButton").click(function() {

	var title = $("#title").val();
	var body = $("#body").val();

	var request = db.transaction(["note"], IDBTransaction.READ_WRITE)
	.objectStore("note")
	.add({title:title,body:body});

	request.onsuccess = function(event) {
	$("#title").val("");
	$("#body").val("");
	displayNotes();
	};

	return false;
	});

	});

	</script>
	<style>
	#noteList li span.label {
	cursor:pointer;
	}
	a.delete {
	color:red;
	font-size:.6em;
	cursor: pointer;
	}
	</style>
	</head>

	<body>

	<h2>Notes</h2>

	<div id="noteList"></div>
	<div id="noteDetail"></div>

	<h2>Add Note</h2>
	<form>
	<input type="text" id="title" placeholder="Title" required><br/>
	<textarea id="body" placeholder="Enter body here..." required></textarea>
	<p>
	<button id="addNoteButton">Save Note</button>
	</p>
	</form>

	</body>
	</html>

	<!-- test change -->