Question

i am opening a DB and then doing a transaction in it. here is the code

var OLC = {}
// Initialising the window.IndexedDB Object
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var db = null;

OLC.indexedDB = {};
OLC.indexedDB.db = null;
OLC.indexedDB.version = null;

OLC.indexedDB.open = function(type) {
    // opening OLCMail DB
    try {
        var dbOpenRequest = window.indexedDB.open("OLCMail");
        dbOpenRequest.onsuccess = function(event){
            OLC.indexedDB.db = dbOpenRequest.result;
            db = dbOpenRequest.result; 
            OLC.indexedDB.version = db.version;
            var thisDB = db; // Need to create this variable since the variable db is assigned to other things later
            db.onversionchange = function(e){
              console.log("Version change triggered, so closing database connection", e.oldVersion, e.newVersion, thisDB);
              thisDB.close();
            };
        console.log("Database Opened", db, event);
        };

        // Creating objectstore "MailHeaders"
        dbOpenRequest.onupgradeneeded = function(e){
            console.log("Database upgrade needed");
            db = dbOpenRequest.result;
            var transaction = dbOpenRequest.transaction;

….and so on

then i have a method loadOfflineMails whose purpose it to create a transaction and get a value from DB

OLC.indexedDB.loadOfflineMails = function () {
    console.log("Opening a new transaction.");
    try {
        var db = OLC.indexedDB.db;
        console.log(OLC.indexedDB.db);
        var objectStore = db.transaction(["MailHeaders"]).objectStore("MailHeaders");
        console.log("Object Store opened", objectStore);

        var cursor = null;

….so on

I am running it as

function _init() {
    OLC.indexedDB.open();
    OLC.indexedDB.loadOfflineMails();
}

window.addEventListener("DOMContentLoaded", _init, false);

The problem that i am having is that when OLC.indexedDB.loadOfflineMails(); is called, the db property of OLC.indexedDB is showing null and hence transactionis not being completed.

But when i alert any value before the transaction statement in loadOfflineMails() the code works fine.
ex.

OLC.indexedDB.loadOfflineMails = function () {
        console.log("Opening a new transaction.");
        try {
                    alert("ANY THING");
            var db = OLC.indexedDB.db;
            console.log(OLC.indexedDB.db);
            var objectStore = db.transaction(["MailHeaders"]).objectStore("MailHeaders");
            console.log("Object Store opened", objectStore);

            var cursor = null;

I am still not able to figure out how an alert statement is causing a null db property to convert into IDBDatabase object.
I have tried console.log, delays in place of alert but nothing works, its like alert() causes a miracle.

FYI: i have done console.log(OLC.indexedDB.db) both before and after alert()
Before alert() it is null and after alert() it is a IDBDatabase Object

Answer 1

The OLC.indexedDB.db property is null cause the database is not yet created when you call the second function. Database opening is executed with a callback function while the rest of your code is executed sequentially. You need to modify the code so that you will execute the loadOfflineMails function at the end of dbOpenRequest.onsuccess function.

change this code:

function _init() {
    OLC.indexedDB.open();
    OLC.indexedDB.loadOfflineMails();
}

into this:

function _init() {
    OLC.indexedDB.open(null,OLC.indexedDB.loadOfflineMails);
}

pass the second function as a parameter to open database function, that way it will execute at the DB is initialized.

and you need to modify the Open Db wrapper like this:

OLC.indexedDB.open = function(type, callback) {
    // opening OLCMail DB
    try {
        var dbOpenRequest = window.indexedDB.open("OLCMail");
        dbOpenRequest.onsuccess = function(event){
            /*your code*/
            callback();//execute the callback function after db init is complete
        }
     }
}