O'Reilly Forums: Database Doesn't Exist When Reloading The Page. Help Needed - O'Reilly Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Database Doesn't Exist When Reloading The Page. Help Needed

#1 User is offline   ramki067 

  • New Member
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 15-October 12

Posted 16 October 2012 - 11:33 PM

Using HTML5 code, I've created the below database capable to doing create,add,delete and print operations on database. However, the ObjectStore is created every time i load the html page and the additional values stored isn't present when i reload the page. What is wrong with the code? Please help. Thanks.

<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;
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){
			db = event.target.result;
			if (db.setVersion) {
				if (db.version != dbVersion) {
					var req = db.setVersion(dbVersion);
					req.onerror = db.onerror;
					req.onsuccess = function () {
						if(db.objectStoreNames.contains("CustDetails")) {
							alert("CustDetails store already present!");
						}
						else{
						//alert("Initialize else function");
						var objectStore = db.createObjectStore("CustDetails",{ Keypath: "AadharNumber", autoIncrement: true });
						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(event){
			alert ( "Added to the database");
			document.getElementById("txtName").value = "";
			document.getElementById("txtEmail").value = "";
		};
		
	},false);

	btnDelete.addEventListener("click", function(){
		//alert("At Delete function");
		//var AadharNumber = document.getElementById("AadharNumber").value;
		var AadharNumber =  parseInt(document.getElementById("AadharNumber").value);
		var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
		var objectStore = transaction.objectStore("CustDetails");
		var request = objectStore.delete(AadharNumber);
		request.onsuccess = function(event){
			alert( "Aadhar Number: "+ AadharNumber + " deleted from the database");
		};
		
	},false);
	
	btnPrint.addEventListener("click", function () {
                    var output = document.getElementById("printOutput");
                    output.textContent = "";
                    var transaction = db.transaction("CustDetails", IDBTransaction.READ_WRITE);
                    var objectStore = transaction.objectStore("CustDetails");
                    var request = objectStore.openCursor();
                    request.onsuccess = function(event) {  
                        var cursor = event.target.result;  
                        if (cursor) {  
                            output.textContent += "Aadhar Number: " + cursor.key + " is " + cursor.value.name + "";
							cursor.continue();  
							
                        }  
                        else {  
                            console.log("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="AadharNumber">
    ID:
	</label>
	<input type="text" id="AadharNumber" name="txtAadharNumber" />
	<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>

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users