SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ramki067 View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •