Hi all,
As in the title, i’m not able to add, delete and print records properly from the database. I’m a newbie and not been able to understand what is wrong with my code.
Please help.
<html>
<title>
IndexedDB</title>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var db;
var test = {};
test.indexedDB = {};
test.indexedDB.db = null;
var dbVersion = 1;
(function () {
var Cust_Data = [{name: "ABC", email: "abc@gmail.com"},
{name: "XYZ", email: "xyz@gmail.com"}];
function initializeDB(){
alert("At initialize DB function");
var request = indexedDB.open("Customers",dbVersion);
request.onerror = function(event){
write("Database cannot be opened:" + event.target.errorCode);
};
request.onsuccess = function(event){
test.indexedDB.db = event.target.result;
db = test.indexedDB.db;
if (db.setVersion) {
if (db.version != dbVersion) {
var req = db.setVersion(dbVersion);
req.onerror = test.indexedDB.onerror;
req.onsuccess = function () {
if(db.objectStoreNames.contains("CustDetails")) {
db.deleteObjectStore("CustDetails");
}
var objectStore = db.createObjectStore("CustDetails",{ Keypath: "Aadhar_Number", autoIncrement: true });
//alert("ObjectStore created");
objectStore.createIndex("name", "name",{unique: false});
objectStore.createIndex("email", "email",{unique: true});
for(i in Cust_Data){
objectStore.add(Cust_Data[i]);
}
};
}
else{
alert("Not created ObjectStore");
}
}
};
}
function contentLoaded(){
alert("At contentLoaded function");
initializeDB();
//db = initializeDB();
//db = test.indexedDB.db;
alert("Value of db in contentLoaded function is :" + db);
var btnAdd = document.getElementById("btnAdd");
var btnDelete = document.getElementById("btnDelete");
var btnPrint = document.getElementById("btnPrint");
btnAdd.addEventListener("click", function(){
alert("At add function");
//alert("Value of db in add function is :" + db);
var name = document.getElementById("txtName").value;
var email = document.getElementById("txtEmail").value;
var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
//alert("Transaction statement passed");
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.add({name: name, email: email});
request.onsuccess = function(){
alert ( " Added to the database");
};
},false);
btnDelete.addEventListener("click", function(){
alert("At Delete function");
var AadharNumber = document.getElementById("Aadhar_Number").value;
var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.delete(Aadhar_Number);
request.onsuccess = function(){
alert( + request.target.name + "deleted from the database");
};
},false);
btnPrint.addEventListener("click", function(){
alert("At Print function");
var output = document.getElementById("printOutput");
var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.openCursor();
request.onsuccess = function(event){
var Cursor = request.result;
if(Cursor){
output.textContent += "Aadhar Number :" + Cursor.key + "is " + Cursor.value.name + "";
Cursor.continue;
}
else{
alert("No more entries");
}
};
},false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);
}
)();
</script>
<body><center>
<div id="container">
<label for="txtName">
Name:
</label>
<input type="text" id="txtName" name="txtName" />
<br />
<label for="txtEmail">
Email:
</label>
<input type="text" id="txtEmail" name="txtEmail" />
<br />
<input type="button" id="btnAdd" value="Add Record" />
<br />
<label for="Aadhar_Number">
ID:
</label>
<input type="text" id="Aadhar_Number" name="Aadhar Number" />
<input type="button" id="btnDelete" value="Delete Record" />
<br />
<input type="button" id="btnPrint" value="Print Records" />
<br />
<output id="printOutput" > </output>
</div>
</center>
</body>
</html>