muthu32/jqm-indexedDB-example.html

## jqm-indexedDB-example.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Short example on using indexedDB with jquery mobile - last updated: May 2012">
  <meta name="author" content="Ido Green">

  <title>IndexedDB with JQM</title>

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

  <script>
      var dbName = "jqm-todo";
      var dbVersion = 1.0;
      var todoDB = {};
      var indexedDB = window.indexedDB || window.webkitIndexedDB ||
        window.mozIndexedDB;

      if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
      }

      todoDB.indexedDB = {};
      todoDB.indexedDB.db = null;
      $(document).bind('pageinit', function() {
        console.log("-- lets start the party --");
        todoDB.indexedDB.open();
        $("#addItem").click(function() {
          addTodo();
        });
      });

      todoDB.indexedDB.onerror = function(e) {
        console.log(e);
      };

      todoDB.indexedDB.open = function() {
        var request = indexedDB.open(dbName, dbVersion);
        request.onsuccess = function(e) {
          console.log ("success our DB: " + dbName + " is open and ready for work");
          todoDB.indexedDB.db = e.target.result;
          var db = todoDB.indexedDB.db;
          if (db.setVersion) {
            console.log("in old setVersion: "+ db.setVersion);
              if (db.version != dbVersion) {
                  var req = db.setVersion(dbVersion);
                  req.onsuccess = function () {
                    if(db.objectStoreNames.contains("todo")) {
                      db.deleteObjectStore("todo");
                    }
                    var store = db.createObjectStore("todo", {keyPath: "timeStamp"});
                    var trans = req.result;
                    trans.oncomplete = function(e) {
                      console.log("== oncomplete transaction ==");
                      todoDB.indexedDB.getAllTodoItems();
                    }
                  };
              }
              else {
                  todoDB.indexedDB.getAllTodoItems();
              }
          }
          else {
              todoDB.indexedDB.getAllTodoItems();
          }
        }

        request.onupgradeneeded = function(e) {
          console.log ("Going to upgrade our DB");

          todoDB.indexedDB.db = e.target.result;
          var db = todoDB.indexedDB.db;
          if(db.objectStoreNames.contains("todo")) {
            db.deleteObjectStore("todo");
          }

          var store = db.createObjectStore("todo",
          {keyPath: "timeStamp"});

          todoDB.indexedDB.getAllTodoItems();
        }

        request.onfailure = todoDB.indexedDB.onerror;
        request.onerror = function(e) {
          console.error("Well... How should I put it? We have some issues with our DB! Err:"+e);
        }
      };

      todoDB.indexedDB.addTodo = function(todoText) {
        var db = todoDB.indexedDB.db;
        var trans = db.transaction(['todo'], "readwrite");
        var store = trans.objectStore("todo");

        var data = {
          "text": todoText,
          "timeStamp": new Date().getTime()
        };

        var request = store.put(data);

        request.onsuccess = function(e) {
          todoDB.indexedDB.getAllTodoItems();
        };

        request.onerror = function(e) {
          console.error("Error Adding an item: ", e);
        };
      };

      todoDB.indexedDB.deleteTodo = function(id) {
        var db = todoDB.indexedDB.db;
        var trans = db.transaction(["todo"], "readwrite");
        var store = trans.objectStore("todo");

        var request = store.delete(id);

        request.onsuccess = function(e) {
          todoDB.indexedDB.getAllTodoItems();
        };

        request.onerror = function(e) {
          console.error("Error deleteing: ", e);
        };
      };

      todoDB.indexedDB.getAllTodoItems = function() {
        var todos = document.getElementById("todoItems");
        todos.innerHTML = "";

        var db = todoDB.indexedDB.db;
        var trans = db.transaction(["todo"], "readwrite");
        var store = trans.objectStore("todo");

        // Get everything in the store;
        var keyRange = IDBKeyRange.lowerBound(0);
        var cursorRequest = store.openCursor(keyRange);

        cursorRequest.onsuccess = function(e) {
          var result = e.target.result;
          if(!!result == false)
            return;

          renderTodo(result.value);
          result.continue();
        };

        cursorRequest.onerror = todoDB.indexedDB.onerror;
      };

      function renderTodo(row) {
        var todos = document.getElementById("todoItems");
        var li = document.createElement("li");
        var a = document.createElement("a");
        var t = document.createTextNode(row.text);

        a.addEventListener("click", function() {
          todoDB.indexedDB.deleteTodo(row.timeStamp);
        }, false);
        // some fun with jquery mobile data attributes
        a.setAttribute("href", "#");
        a.setAttribute("data-iconpos", "notext");
        a.setAttribute("data-role", "button");
        a.setAttribute("data-icon", "delete");
        a.setAttribute("data-inline", "true");

        li.appendChild(a);
        li.appendChild(t);
        todos.appendChild(li)
        // And lets create the new il item with its markup
        $("#todoItems").trigger('create');
      }

      // Add an item only if we have more then zero letters
      function addTodo() {
        var todo = document.getElementById("todo");
        if (todo.value.length > 0) {
          todoDB.indexedDB.addTodo(todo.value);
          todo.value = "";
        }
      }


      // use it in case you wish to work on specific 'set' of data
      function showAll() {
        document.getElementById("ourList").innerHTML = "" ;
        var request = window.indexedDB.open(dbName);
        request.onsuccess = function(event) {
          // Enumerate the entire object store.
          var db = todoDB.indexedDB.db;
          var trans = db.transaction(["todo"], IDBTransaction.READ_ONLY);
          var request = trans.objectStore("todo").openCursor();
          var ul = document.createElement("ul");
          request.onsuccess = function(event) {
            var cursor = request.result || event.result;
            // If cursor is null then we've completed the enumeration.
            if (!cursor) {
              document.getElementById("ourList").appendChild(ul);
              return;
            }
            var li = document.createElement("li");
            li.textContent = "key: " + cursor.key + " => Todo text: " + cursor.value.text;
            ul.appendChild(li);
            cursor.continue();
          }
        }
      }
      </script>

</head>
<body>
  <div data-role="page">

    <div data-role="header">
      <h1>IndexedDB with JQM</h1>
    </div>
    <!-- /header -->

    <div data-role="content">
      <p>
        This is a short example of inexedDB with jQueryMobile on a todo list app. Please open Chrome DevTools and/or FireBug in order to see all the log message and understand what is the process.
      </p>
      <p>
        <input type="text" id="todo" name="todo" placeholder="What do you need to do?" />
        <input type="submit" value="Add Todo Item" id="addItem" />
      </p>

      <ul id="todoItems" data-role="listview" data-inset="true" data-filter="true"></ul>

    </div>
    <!-- /content -->

    <div data-role="footer">
      <p>
        <ul>
          <li>
            <a href="http://greenido.wordpress.com">Ido's blog</a>
          </li>
          <li>
            <a href="http://www.w3.org/TR/IndexedDB/">IndexedDB spec on w3c</a>
          </li>
          <li>
            <a href="https://github.com/greenido/WebSQL-to-IndexedDB-example">WebSQL to IndexedDB example on github</a>
          </li>
        </ul>
      </p>
    </div> <!-- /footer -->
  </div>   <!-- /page -->
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Short example on using indexedDB with jquery mobile - last updated: May 2012">
	<meta name="author" content="Ido Green">

	<title>IndexedDB with JQM</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

	<script>
	var dbName = "jqm-todo";
	var dbVersion = 1.0;
	var todoDB = {};
	var indexedDB = window.indexedDB \|\| window.webkitIndexedDB \|\|
	window.mozIndexedDB;

	if ('webkitIndexedDB' in window) {
	window.IDBTransaction = window.webkitIDBTransaction;
	window.IDBKeyRange = window.webkitIDBKeyRange;
	}

	todoDB.indexedDB = {};
	todoDB.indexedDB.db = null;
	$(document).bind('pageinit', function() {
	console.log("-- lets start the party --");
	todoDB.indexedDB.open();
	$("#addItem").click(function() {
	addTodo();
	});
	});

	todoDB.indexedDB.onerror = function(e) {
	console.log(e);
	};

	todoDB.indexedDB.open = function() {
	var request = indexedDB.open(dbName, dbVersion);
	request.onsuccess = function(e) {
	console.log ("success our DB: " + dbName + " is open and ready for work");
	todoDB.indexedDB.db = e.target.result;
	var db = todoDB.indexedDB.db;
	if (db.setVersion) {
	console.log("in old setVersion: "+ db.setVersion);
	if (db.version != dbVersion) {
	var req = db.setVersion(dbVersion);
	req.onsuccess = function () {
	if(db.objectStoreNames.contains("todo")) {
	db.deleteObjectStore("todo");
	}
	var store = db.createObjectStore("todo", {keyPath: "timeStamp"});
	var trans = req.result;
	trans.oncomplete = function(e) {
	console.log("== oncomplete transaction ==");
	todoDB.indexedDB.getAllTodoItems();
	}
	};
	}
	else {
	todoDB.indexedDB.getAllTodoItems();
	}
	}
	else {
	todoDB.indexedDB.getAllTodoItems();
	}
	}

	request.onupgradeneeded = function(e) {
	console.log ("Going to upgrade our DB");

	todoDB.indexedDB.db = e.target.result;
	var db = todoDB.indexedDB.db;
	if(db.objectStoreNames.contains("todo")) {
	db.deleteObjectStore("todo");
	}

	var store = db.createObjectStore("todo",
	{keyPath: "timeStamp"});

	todoDB.indexedDB.getAllTodoItems();
	}

	request.onfailure = todoDB.indexedDB.onerror;
	request.onerror = function(e) {
	console.error("Well... How should I put it? We have some issues with our DB! Err:"+e);
	}
	};

	todoDB.indexedDB.addTodo = function(todoText) {
	var db = todoDB.indexedDB.db;
	var trans = db.transaction(['todo'], "readwrite");
	var store = trans.objectStore("todo");

	var data = {
	"text": todoText,
	"timeStamp": new Date().getTime()
	};

	var request = store.put(data);

	request.onsuccess = function(e) {
	todoDB.indexedDB.getAllTodoItems();
	};

	request.onerror = function(e) {
	console.error("Error Adding an item: ", e);
	};
	};

	todoDB.indexedDB.deleteTodo = function(id) {
	var db = todoDB.indexedDB.db;
	var trans = db.transaction(["todo"], "readwrite");
	var store = trans.objectStore("todo");

	var request = store.delete(id);

	request.onsuccess = function(e) {
	todoDB.indexedDB.getAllTodoItems();
	};

	request.onerror = function(e) {
	console.error("Error deleteing: ", e);
	};
	};

	todoDB.indexedDB.getAllTodoItems = function() {
	var todos = document.getElementById("todoItems");
	todos.innerHTML = "";

	var db = todoDB.indexedDB.db;
	var trans = db.transaction(["todo"], "readwrite");
	var store = trans.objectStore("todo");

	// Get everything in the store;
	var keyRange = IDBKeyRange.lowerBound(0);
	var cursorRequest = store.openCursor(keyRange);

	cursorRequest.onsuccess = function(e) {
	var result = e.target.result;
	if(!!result == false)
	return;

	renderTodo(result.value);
	result.continue();
	};

	cursorRequest.onerror = todoDB.indexedDB.onerror;
	};

	function renderTodo(row) {
	var todos = document.getElementById("todoItems");
	var li = document.createElement("li");
	var a = document.createElement("a");
	var t = document.createTextNode(row.text);

	a.addEventListener("click", function() {
	todoDB.indexedDB.deleteTodo(row.timeStamp);
	}, false);
	// some fun with jquery mobile data attributes
	a.setAttribute("href", "#");
	a.setAttribute("data-iconpos", "notext");
	a.setAttribute("data-role", "button");
	a.setAttribute("data-icon", "delete");
	a.setAttribute("data-inline", "true");

	li.appendChild(a);
	li.appendChild(t);
	todos.appendChild(li)
	// And lets create the new il item with its markup
	$("#todoItems").trigger('create');
	}

	// Add an item only if we have more then zero letters
	function addTodo() {
	var todo = document.getElementById("todo");
	if (todo.value.length > 0) {
	todoDB.indexedDB.addTodo(todo.value);
	todo.value = "";
	}
	}


	// use it in case you wish to work on specific 'set' of data
	function showAll() {
	document.getElementById("ourList").innerHTML = "" ;
	var request = window.indexedDB.open(dbName);
	request.onsuccess = function(event) {
	// Enumerate the entire object store.
	var db = todoDB.indexedDB.db;
	var trans = db.transaction(["todo"], IDBTransaction.READ_ONLY);
	var request = trans.objectStore("todo").openCursor();
	var ul = document.createElement("ul");
	request.onsuccess = function(event) {
	var cursor = request.result \|\| event.result;
	// If cursor is null then we've completed the enumeration.
	if (!cursor) {
	document.getElementById("ourList").appendChild(ul);
	return;
	}
	var li = document.createElement("li");
	li.textContent = "key: " + cursor.key + " => Todo text: " + cursor.value.text;
	ul.appendChild(li);
	cursor.continue();
	}
	}
	}
	</script>

	</head>
	<body>
	<div data-role="page">

	<div data-role="header">
	<h1>IndexedDB with JQM</h1>
	</div>
	<!-- /header -->

	<div data-role="content">
	<p>
	This is a short example of inexedDB with jQueryMobile on a todo list app. Please open Chrome DevTools and/or FireBug in order to see all the log message and understand what is the process.
	</p>
	<p>
	<input type="text" id="todo" name="todo" placeholder="What do you need to do?" />
	<input type="submit" value="Add Todo Item" id="addItem" />
	</p>

	<ul id="todoItems" data-role="listview" data-inset="true" data-filter="true"></ul>

	</div>
	<!-- /content -->

	<div data-role="footer">
	<p>
	<ul>
	<li>
	<a href="http://greenido.wordpress.com">Ido's blog</a>
	</li>
	<li>
	<a href="http://www.w3.org/TR/IndexedDB/">IndexedDB spec on w3c</a>
	</li>
	<li>
	<a href="https://github.com/greenido/WebSQL-to-IndexedDB-example">WebSQL to IndexedDB example on github</a>
	</li>
	</ul>
	</p>
	</div> <!-- /footer -->
	</div> <!-- /page -->
	</body>
	</html>