IndexedDB Reference Error: db is not defined

Question

I'm trying to create an application for Firefox OS which basically needs to store some data using IndexedDB.

The store() function is called when the user clicks on a submit button which results in the creation of the name and description variables an user submitted form.

However, I keep getting a Reference Error saying my db object is not defined. Any ideas why this is happening?

Here's my current code:-

function store () {
    // create the transaction with 1st parameter is the list of stores and the second specifies
    // a flag for the readwrite option
    var transaction = db.transaction([ 'Apps' ], 'readwrite');

    //Create the Object to be saved i.e. our App details
    var value = {};
    value.name = name;
    value.desc = description;

    // add the details to the store
    var store = transaction.objectStore('Apps');
    var request = store.add(value);
    request.onsuccess = function (e) {
        alert("Your App data has been saved");
    };
    request.onerror = function (e) {
        alert("Error in saving the App data. Reason : " + e.value);
    }
}


$(document).ready(function(){
// variable which will hold the database connection
var db;

    if (window.indexedDB) {
        console.log("IndexedDB is supported");
    }
    else {
        alert("Indexed DB is not supported!");
    }

    // open the database
    // 1st parameter : Database name. We are using the name 'Appsdb'
    // 2nd parameter is the version of the database.
    var request = indexedDB.open('Appsdb', 1);

    request.onsuccess = function (e) {
        // e.target.result has the connection to the database
        db = e.target.result;

        console.log(db);
        console.log("DB Opened!");
    }

    request.onerror = function (e) {
        console.log(e);
    };

    // this will fire when the version of the database changes
    // We can only create Object stores in a versionchange transaction.
    request.onupgradeneeded = function (e) {
        // e.target.result holds the connection to database
        db = e.target.result;

        if (db.objectStoreNames.contains("Apps")) {
            db.deleteObjectStore("Apps");
        }

        // create a store named 'Apps'
        // 1st parameter is the store name
        // 2nd parameter is the key field that we can specify here. Here we have opted for autoIncrement but it could be your
        // own provided value also.
        var objectStore = db.createObjectStore('Apps', { keyPath: 'id', autoIncrement: true });

        console.log("Object Store has been created");
    };

});

Answer 1

The problem is with the scope of the db variable. Currently you have the following line var db; declared inside of the $(document).ready function. Move its declaration to a more global scope i.e. outside of this function and the variable will be visible in the store() function too.

Hope this helps.