Skip to content

Instantly share code, notes, and snippets.

@dariuszparys

dariuszparys/TODOList.html

Created December 29, 2010 11:07
Show Gist options
  • Save dariuszparys/758423 to your computer and use it in GitHub Desktop.
Save dariuszparys/758423 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 IndexedDB IE9 TODOList Sample
Raw
TODOList.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="bootidb.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function commitTransaction(txn)
{
try
{
if (txn)
{
txn.oncomplete = function ()
{
if (txn.db)
txn.db.close();
}
txn.commit();
}
}
catch (e)
{
output_trace("Error in commitTransaction(): " + e.message);
}
}
function abortTransaction(txn)
{
try
{
if (txn)
{
txn.onabort = function ()
{
if (txn.db)
txn.db.close();
}
txn.abort();
alert('transaction aborted');
}
}
catch (e)
{
output_trace("Error in abortTransaction(): " + e.message);
}
}
function output_trace(message)
{
var trace = $("#trace");
if ((trace != null ) || (trace != undefined))
trace.html(message);
}
Array.prototype.contains = function(obj) {
try
{
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
}
catch (e)
{
output_error("Error in Array.prototype.contains(): " + e.message);
}
};
var todoDB = {};
todoDB.db = "todolist";
todoDB.objectStore = "todos";
todoDB.keyPath = "id";
todoDB.indexTodo = "todo";
todoDB.indexTodoKeyPath = "todo";
todoDB.searchResults = [];
todoDB.addTodo = function( todoitem )
{
var database = null;
try
{
var requestDatabase = null;
var requestObjectStore = null;
var requestPut = null;
var requestIndex = null;
var store = null;
var transaction = null;
requestDatabase = window.indexedDB.open(todoDB.db, 'Todo Database');
requestDatabase.onsuccess = function( evt )
{
database = evt.result;
var whenReady = function()
{
transaction = database.transaction();
var objectStore = transaction.objectStore(todoDB.objectStore);
var newEntry = { todo: todoitem };
requestPut = objectStore.put(newEntry);
requestPut.onsuccess = function(evt)
{
commitTransaction(transaction);
}
requestPut.onerror = function(evt)
{
output_trace("requestPut.onerror = " + evt.message);
abortTransaction(transaction);
}
};
if( database.objectStoreNames.contains(todoDB.objectStore) )
{
whenReady();
}
else
{
requestObjectStore = database.createObjectStore(
todoDB.objectStore,
todoDB.keyPath,
true );
requestObjectStore.onsuccess = function(evt)
{
store = evt.result;
requestIndex = store.createIndex(
todoDB.indexTodo,
todoDB.indexTodoKeyPath,
false);
requestIndex.onsuccess = function(evt)
{
whenReady();
}
requestIndex.onerror = function(evt)
{
output_trace("requestIndex.onerror = " + evt.message);
abortTransaction(transaction);
}
}
requestObjectStore.onerror = function(evt)
{
output_trace("requestObjectStore.onerror = " + evt.message);
abortTransaction(transaction);
}
}
}
requestDatabase.onerror = function(evt)
{
output_trace("requestDatabase.onerror = " + evt.message);
abortTransaction(transaction);
}
}
catch (e)
{
output_trace("catch(e) = " + e.message);
if(database)
{
database.close();
}
}
}
todoDB.findTodos = function () {
var database = null;
try
{
var requestDatabase = null;
var requestObjectStore = null;
var requestIndex = null;
var requestCursor = null;
var requestMove = null;
var store = null;
var cursor = null;
var transaction = null;
var index = 1;
requestDatabase = window.indexedDB.open(todoDB.db, 'Todo Database');
requestDatabase.onsuccess = function (evt)
{
database = evt.result;
transaction = database.transaction();
if (database.objectStoreNames.contains(todoDB.objectStore))
{
store = transaction.objectStore(todoDB.objectStore);
requestCursor = store.openCursor();
requestCursor.onsuccess = function(evt)
{
var addRecord = function()
{
requestIndex = store.get(index);
requestIndex.onsuccess = function(evt)
{
var record = evt.result;
todoDB.searchResults.push(record.todo);
index++;
addRecord();
}
requestIndex.onerror = function(evt)
{
commitTransaction(transaction);
displayTodos();
}
}
var cursor = evt.result;
addRecord();
}
requestCursor.onerror = function(evt)
{
trace_output("requestCursor.onerror = " + evt.message);
abortTransaction(transaction);
}
}
}
}
catch (e)
{
output_trace("Error in bugDB.findProjectSearchResults(): " + e.message);
if (db)
db.close();
}
};
function displayTodos()
{
var result = "<ul>";
$.each(todoDB.searchResults, function()
{
result += "<li>" + this + "</li>";
});
result += "</ul>";
$("#todos").html(result);
}
$(document).ready( function()
{
$("#actionAdd").click(function() {
var todoItem = $("#todoitem").val();
todoDB.addTodo(todoItem);
});
$("#actionFind").click(function() {
todoDB.searchResults = [];
todoDB.findTodos();
});
});
</script>
</head>
<body>
<input type=text id="todoitem" />
<input type=submit value=add id="actionAdd" />
<input type=submit value=refresh id="actionFind" />
<h2>Todos:</h2>
<div id="todos"></div>
<div id="trace"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment