Add the following code in the ‘saveOrder’ method. This code is responsible for saving record in the object store:
function saveOrder() {
var db = window.indexedDB.open("OrdersDB");
if (db) {
db.onsuccess = function (e) {
//S1: Get the Transaction for the ObjectStore, here in this case it is for readwrite
var orderStore = e.target.result.transaction("NewOrderStore", "readwrite");
//S2: Get the object store object
var tbl = orderStore.objectStore("NewOrderStore");
//S3: Read values entered in each textbox and also the selected date
var id = document.getElementById('txtordno').value;
var sockiestName = document.getElementById('txtpharmacist').value;
var orderDate = selectedDate;
var orderMedicine = document.getElementById('txtordermedicine').value;
var quantity = document.getElementById('txtqty').value;
var unitProce = document.getElementById('txtunitprice').value;
var totalPrice = parseInt(document.getElementById('txtunitprice').value) * parseInt(document.getElementById('txtqty').value);
//S4: Add the values against each keypath on object store
var saveOperation = tbl.add({
"id": id,
"PharmacistName": sockiestName ,
"OrderDate":orderDate ,
"OrderMedicine": orderMedicine,
"Quantity": quantity,
"UnitPrice": unitProce,
"TotalPrice": totalPrice
});
saveOperation.onsuccess = function (e) {
var res = document.getElementById("txtres");
res.value = "Saved" + e.target.result;
};
saveOperation.onerror = function (e) {
var res = document.getElementById("txtres");
res.value = "Error Occured" + e.value;
};
document.getElementById('txtprice').value = totalPrice;
};
loadOrder(); //Load Orders if Table is already Available
}
}
Step 8:
Add the following code in ‘loadOrderById’ method. This is used to display the record details based on the ‘id’ value entered in the ‘OrderId’ textbox. This method provides records which can be used to Edit or Delete.
function loadOrderById(id)
{
var ordno = document.getElementById('txtordno');
id = ordno.value;
//S1: Open the database
var db = window.indexedDB.open("OrdersDB");
if (db) {
db.onsuccess = function (e) {
//S2: Begin the transaction on the object store
var transaction = e.target.result.transaction("NewOrderStore", "readonly");
var objectStore = transaction.objectStore("NewOrderStore");
//S3: Set the cursor based upon the id (key) of the record
var orderCursor = objectStore.openCursor(id);
//S4: Show the record in the textboxes and datepicker control
orderCursor.onsuccess = function (e) {
var reader = e.target.result;
if (reader) {
document.getElementById('txtpharmacist').value = reader.value.PharmacistName;
datePickerControl.current = reader.value.OrderDate;
document.getElementById('txtordermedicine').value = reader.value.OrderMedicine;
document.getElementById('txtqty').value = reader.value.Quantity;
document.getElementById('txtunitprice').value = reader.value.UnitPrice;
document.getElementById('txtprice').value = reader.value.TotalPrice;
}
};
};
}
}