So basically I’ve been reading through quite a few tutorials, demos, and the API specification itself and not been getting very far and would very much appreciate your guys help on this.
I’ve been trying to get a better grasp of IndexedDBs recently and have come across a few problems and would like some criticism/feedback on this code.
There are two errors in this code that I can’t seem to fix.
First being on load the method init() is called which opens the database and fills my lists with the data already stored. Although the getAllDetails function is after the open function an error in the console says “db is null”.
Second problem being with the deleteDetails function, when trying to delete any index, an error in the console says “A mutation operation was attempted on a database that did not allow mutations.”
Any help would be greatly appreciated and I apologise for the huge amount of code!
Ps. This is all tested using a localhost server using FF 17, and Chrome 22.
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
var Main = {};
Main.indexedDB = {};
Main.indexedDB.db = null;
Main.indexedDB.onerror = function(e) {
console.log(e);
};
function init() {
Main.indexedDB.open();
Main.indexedDB.getAllDetails();
}
Main.indexedDB.open = function () {
var request = indexedDB.open("DBV1",2);
//If no db exists or if the database is behind on versions then it will update.
//Though FF is the only browser atm that supports this method.
request.onupgradeneeded = function (e) {
console.log("Running UpgradeNeeded");
Main.indexedDB.db = e.target.result;
var thisDb = Main.indexedDB.db;
thisDb.onerror = function (e) {
alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);
};
if (!thisDb.objectStoreNames.contains("Profile")) {
console.log("I need to make the Profile object store.");
thisDb.createObjectStore("Profile", { keyPath: "UserId", autoIncrement: true });
}
if (!thisDb.objectStoreNames.contains("Appointments")) {
console.log("I need to make the Appointments object store.");
thisDb.createObjectStore("Appointments", { keyPath: "AppointmentId", autoIncrement: true });
}
if (!thisDb.objectStoreNames.contains("Assignment")) {
console.log("I need to make the Assignment object store.");
var objectStore = thisDb.createObjectStore("Assignment", { keyPath: "AssignementId", autoIncrement: true });
}
}; //End-UpgradeNeeded
//To make this compatible with Chrome, the onsuccess method must be used.
request.onsuccess = function (e) {
console.log("This was successful.");
Main.indexedDB.db = e.target.result;
var thisDb = Main.indexedDB.db;
thisDb.onerror = function (e) {
alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);
};
if (!thisDb.objectStoreNames.contains("Profile")) {
console.log("I need to make the Profile object store.");
thisDb.createObjectStore("Profile", { keyPath: "UserId", autoIncrement: true });
}
else{
}
if (!thisDb.objectStoreNames.contains("Appointments")) {
console.log("I need to make the Appointments object store.");
thisDb.createObjectStore("Appointments", { keyPath: "AppointmentId", autoIncrement: true });
}
else{
}
if (!thisDb.objectStoreNames.contains("Assignment")) {
console.log("I need to make the Assignment object store.");
thisDb.createObjectStore("Assignment", { keyPath: "AssignementId", autoIncrement: true });
}
else{
}
}; //End-onsuccess
request.onerror = function (e) {
alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);
};
}; //End-OpenFunction
Main.indexedDB.addDetails = function (ProfName, AppointName) {
var db = Main.indexedDB.db;
console.log("Before Prof");
var transProf = db.transaction(["Profile"], "readwrite");
var storeProf = transProf.objectStore("Profile");
console.log("Before Appo");
var transAppo = db.transaction(["Appointments"], "readwrite");
var storeAppo = transAppo.objectStore("Appointments");
var dataProf = {
"text": ProfName
};
var dataAppo = {
"text": AppointName
};
var requestProf = storeProf.put(dataProf);
requestProf.onsuccess = function (e) {
console.log("Prof data successfully entered.");
};
requestProf.onerror = function (e) {
console.log(e);
};
var requestAppo = storeAppo.put(dataAppo);
requestAppo.onsuccess = function (e) {
console.log("Appo data successfully entered.");
};
requestAppo.onerror = function (e) {
console.log(e);
};
}; //End-AddDetails
function addDetails() {
var Prof = document.getElementById("ProfileName");
var Appo = document.getElementById("AppointmentName");
Main.indexedDB.addDetails(Prof.value, Appo.value);
Main.indexedDB.getAllDetails();
};
Main.indexedDB.getAllDetails = function () {
console.log("Get all called.");
var Prof = document.getElementById("Profile");
Prof.innerHTML = "";
var Appo = document.getElementById("Appointments");
Appo.innerHTML = "";
var db = Main.indexedDB.db;
var transProf = db.transaction(["Profile"], "readwrite");
var storeProf = transProf.objectStore("Profile");
var transAppo = db.transaction(["Appointments"], "readwrite");
var storeAppo = transAppo.objectStore("Appointments");
console.log("Stores and transactions created.");
//////////////////////////////////////////////////////////////////
var cursorRequestProf = storeProf.openCursor();
cursorRequestProf.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
renderUser(result.value, 1);
result.continue();
};
cursorRequestProf.onerror = Main.indexedDB.onerror;
/////////////////////////////////////////////////////////////////
var cursorRequestAppo = storeAppo.openCursor();
cursorRequestAppo.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
renderUser(result.value, 2);
result.continue();
};
cursorRequestAppo.onerror = Main.indexedDB.onerror;
/////////////////////////////////////////////////////////////////
console.log("Cursors complete.");
}; //End-GetAllDetails
function renderUser(row, column) {
if(column == 1){
var Users = document.getElementById("Profile");
}
else{
var Users = document.getElementById("Appointments");
}
var li = document.createElement("li");
var t = document.createTextNode(row.text);
li.appendChild(t);
Users.appendChild(li);
};
function deleteDetails(){
var deleteIndex = document.getElementById("DeleteNo");
Main.indexedDB.deleteIndex(deleteIndex.value);
Main.indexedDB.getAllDetails();
};
Main.indexedDB.deleteIndex = function(index){
var db = Main.indexedDB.db;
var transProf = db.transaction(["Profile"], "readwrite");
var storeProf = transProf.objectStore("Profile");
var transAppo = db.transaction(["Appointments"], "readwrite");
var storeAppo = transAppo.objectStore("Appointments");
var requestProf = storeProf.deleteIndex(index);
requestProf.onsuccess = function(e) {
console.log("Successful Prof delete");
};
requestProf.onerror = function(e) {
console.log("Error Prof Deleting: ", e);
};
var requestAppo = storeAppo.deleteIndex(index);
requestAppo.onsuccess = function(e) {
console.log("Successful Appo delete");
};
requestAppo.onerror = function(e) {
console.log("Error Appo Deleting: ", e);
};
};
First problem: You are calling the getAllDetails() directly after the open method. You can’t do this due the async nature of the indexeddb API. The db must be opened before you can call the getAllDetails method. This means you will have to work with a callback function.
Only when the onsuccess is called you can start using the indexedDB.
Second problem: An index can only be deleted in a version change transaction. The only way to get such transaction is by opening the db with a higher version number. In this case the version change transaction is accessible inside the onupgradeneeded callback on the indexeddb.open request.
For more info about indexeddb, check my blog.