October 16th, 2012, 01:26 AM
|
|
Contributing User
|
|
Join Date: Mar 2008
Posts: 56
Time spent in forums: 23 h 54 m 13 sec
Reputation Power: 6
|
|
|
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>
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
