HTML5 Database Creation Example not helpful

[jeffheifetz]

I think it would be better if we showed an example that actually showed how to properly open and create a database with a callback. Something like -

//Create a namespace to hold our database variable
if (typeof mynamespace === 'undefined') {
    mynamespace = {};
}

(function () {

    //This method is only called once (the first time the database is created)
    function onDBCreate(database) {
        //Attach the database because "window.openDatabase" would not have returned it
        mynamespace.db = database;
        //Create the table in the database
        database.transaction(
            function (tx) {tx.executeSql('CREATE TABLE tbl_name (key int unique, name text)',
                [],
                function (tx, res) {
                    alert("Table Created Successfully");
                },
                function (tx, err) {
                    alert("ERROR - Table creation failed - code: " + err.code + ", message: " + err.message);
                });
            }
        );
    }

    if (window.openDatabase) {
        //Will either return the existing database or call our callback onDBCreate
        mynamespace.db = window.openDatabase('documents', '1.0', 'Offline document storage', 5 * 1024 * 1024, onDBCreate);
    } else {
        alert("This device does not have HTML5 Database support");
    }
}());

[miamon]

Jeff,

really we need an example like this, but i think we have to add:

• Insert command for default table values
• First Select
• inserted too some Try catch commands

Here the code:

//Create a namespace to hold our database variable
if( typeof mynamespace === 'undefined') {
    mynamespace = {};
}( function() {

    //This method is only called once (the first time the database is created)
    function onDBCreate(database) {
        //Attach the database because "window.openDatabase" would not have returned it
        mynamespace.db = database;

        mynamespace.db.transaction(function(tx) {
            //Create the table in the database
            tx.executeSql('CREATE TABLE tbl_name (key int unique, name text)', [], function(tx, res) {
                alert("Table Created Successfully");
            }, function(tx, err) {
                alert("ERROR - Table creation failed - code: " + err.code + ", message: " + err.message);
            });
            //Inserting default values in the table
            var row_tbl_name = {
                name : "BlackBerry"
            };
            tx.executeSql('INSERT INTO tbl_name (name) VALUES (?)', [row_tbl_name.name], function(tx, res) {
                alert("Row Inserted Successfully. Insert ID  = " + res.insertId);
                showContent();
            }, function(tx, err) {
                alert("ERROR - Row Insert failed - code: " + err.code + ", message: " + err.message);
            });
        }, errorTrans, successTrans);
    }

    if(window.openDatabase) {
        //Will either return the existing database or call our callback onDBCreate
        var name = 'documents';
        var version = '1.0';
        var displayName = 'Offline document storage';
        var estimatedSize = 5 * 1024 * 1024;
        var creationCallback = onDBCreate;
        try {
            mynamespace.db = window.openDatabase(name, version, displayName, estimatedSize, creationCallback);
            if(!mynamespace.db) {
                alert("Failed to open the database");
            } else {
                alert("Database opened Successfully");
            }
        } catch(err) {
            alert('Error: ' + err.name + '; ' + err.message);
        }
    } else {
        alert("This device does not have HTML5 Database support");
    }
}());

function errorTrans(err) {
    alert("ERROR - Transaction - code: " + err.code + ", message: " + err.message);
}

function successTrans() {
    alert("Transaction executed Successfully");
}

function doLoad() {
    alert("doLoad");
    showContent();
}

function showContent() {

    mynamespace.db.transaction(function(tx) {
        tx.executeSql('select * from tbl_name', [], function(tx, res) {
            alert("Select did it Successfully. Rows returned: " + res.rows.length);
            var sHtml = "";
            for(var i = 0; i < res.rows.length; ++i) {
                var row = res.rows.item(i);
                sHtml = sHtml + "
" + row['name'] + "
";
            }
            if(!res.rows.length) {
                sHtml = "No info to show";
            }
            document.getElementById("content_tbl_name").innerHTML = sHtml;
        }, function(tx, err) {
                        //err.code=5 no such table
            if(err.code != 5) {
                alert("ERROR - Select failed - code: " + err.code + ", message: " + err.message);
            }
        });
    }, errorTrans, successTrans);
}

[jeffheifetz]

Its important to note that the current example is also WRONG.

It uses the namespace Window instead of window

[jeffheifetz]

@miamon We can massage the example you put up into sample app. I feel like that may be a better place for it