Since the IndexedDB programming in JavaScript uses Asynchronous API, as a developer we need to be careful while implementing each step. Write the following code in ‘createdatabase’ method
function createdatabase() {
orderDB = window.indexedDB.open("OrdersDB", 1); //Name of the database
//Create Object Store
orderDB.onupgradeneeded = function (e) {
var ordDb = e.target.result;
transaction = e.target.result
//Create Table. Here the Name of the Table
//is 'NewOrderStore' and the key is set to name as 'id'
tbl = ordDb.createObjectStore("NewOrderStore", { keyPath: "id"});
//The column metadata
var columnOptions = { unique: false, multientry: false };
//Define the Columns
tbl.createIndex("PharmacistName1", "PharmacistName", columnOptions);
tbl.createIndex("OrderDate1", "OrderDate", columnOptions);
tbl.createIndex("OrderMedicine1", "OrderMedicine", columnOptions);
tbl.createIndex("Quantity1", "Quantity", columnOptions);
tbl.createIndex("UnitPrice1", "UnitPrice", columnOptions);
tbl.createIndex("TotalPrice1", "TotalPrice", columnOptions);
var md = new Windows.UI.Popups.MessageDialog("DB Created");
md.showAsync();
};
//If the DB creation is successful
orderDB.onsuccess = function (e) {
if (dbCreated) {
var dd = e.target.result;
transaction = e.target.result;
var dbName = transaction.name;
loadOrder(); //Load Orders if Table is already Available
}
};
dbCreated = true;
}
Step 5:
Add the following code in ‘neworder’ method which clears all textboxes.
function neworder()
{
document.getElementById('txtordno').value = "";
document.getElementById('txtpharmacist').value = "";
document.getElementById('txtordermedicine').value = "";
document.getElementById('txtqty').value = "";
document.getElementById('txtunitprice').value = "";
document.getElementById('txtprice').value = "";
}
Step 6:
Add the following code in ‘loadOrder’ method:
function loadOrder() {
// debugger;
var orders = [];
var resHTML = "";
//S1: open the database
var db = window.indexedDB.open("OrdersDB");
if (db)
{
db.onsuccess = function (e) {
//S2: Get transaction object for the Object Store for performing operation
var transaction =e.target.result.transaction("NewOrderStore", "readonly");
//S3: Begin the transaction on the object store
var objectStore = transaction.objectStore("NewOrderStore");
//S4: On the completion of the transaction generate HTML table dynamically
transaction.oncomplete = function () {
resHTML = "<table border='1'><tr><th>OrderId</th><th>StockitestName</th><th>OrderDate</th><th>OrderMedicine</th><th>OrderQuantity</th><th>UnitPrice</th><th>TotalPrice</th></tr>";
for (var i = 0; i < orders.length; i++) {
resHTML += "<tr><td>" + orders[i].id + "</td><td>" +
orders[i].PharmacistName + "</td><td>" +
orders[i].OrderDate + "</td><td>" + orders[i].OrderMedicine +
"</td><td>" + orders[i].Quantity +
"</td><td>" + orders[i].UnitPrice + "</td><td>" +
orders[i].TotalPrice + "</td></tr>";
}
resHTML+="</table>"
var resDiv = document.getElementById('dvData');
resDiv.innerHTML = resHTML;
};
//S5: Set the Cursor for Reading Orders from object store. This points to the first record in the source
var orderCursor = objectStore.openCursor();
//S6: Add each record in the Array of name 'orders'
orderCursor.onsuccess = function (e) {
var reader = e.target.result;
if (reader) {
orders.push(reader.value);
reader.continue();
}
};
};
}
}