HTML5: Not Able To Add, Delete And Print Records Properly!

**ramki067** · Oct 16, 2012 00:27

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.

Code:

<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>

**paul_wilkins** · Oct 16, 2012 04:44

Originally Posted by ramki067

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.

What tests do you have that help to determine if the functions are correctly doing what they need to achieve?

User Tag List

Thread: HTML5: Not Able To Add, Delete And Print Records Properly!

Thread Tools

Display

HTML5: Not Able To Add, Delete And Print Records Properly!

Bookmarks

Bookmarks

Posting Permissions