#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    63
    Rep Power
    7

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


    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>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    24
    Rep Power
    0
    Are HTML5 databases supported on every browser ?

    Maybe you're better off using PHP and save the data on the server.

    Léon

IMN logo majestic logo threadwatch logo seochat tools logo