Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Posts: 23
Registered: ‎05-11-2011
My Device: 9800 BOLD
My Carrier: Videotron
Accepted Solution

Why I need alert('!');

Hi,

 

When I use the function below from a button click event all is all right.

But when I use it from the body onload event I must put a alert to

have my result. 

 

html5obj.webdb.loadpagedata = function() {

 

var blocItems = document.getElementById("blocItems");

html5obj.webdb.getAllpageItems(loadpageItems);

alert('Load...');

blocItems.innerHTML=strHTMLBloc;

strHTMLBloc='';

 

}

 

 

Did you know why ? 

 

TIA

 

 

 

 

Contributor
Posts: 23
Registered: ‎05-11-2011
My Device: 9800 BOLD
My Carrier: Videotron

Re: Why I need alert('!');

Finally I got it work...but I use this base code (better error trapper) .

 

<head>
<html>
    <title> HTML5 Web DB </title>
    <meta id="viewport" name="viewport" content="width=device-width" />
    <link href="/styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        th { text-align: left; font-weight: bold; background-color: #CCC; padding: 0.25em; font-size: 1.25em; font-variant: small-caps; }
    </style>

    <script type="text/JavaScript">
        var db;
        
        /**
         * Helper functions
         */        
        function success(msg) {
            console.log(msg);
        }
        function error(msg) {
            var ele = document.getElementById("output");
            if (ele) {
                ele.innerHTML += "<div class='error'>" + msg + "</div>" ;
            }
        }
        function getSQLErrorName(err)
        {
            if (err === null)
            {
                return "";
            }
            switch(err.code)
            {
                case err.DATABASE_ERR:
                    //The statement failed for database reasons not covered by any other error code.
                    return "DATABASE";
                case err.VERSION_ERR:
                    //The operation failed because the actual database version was not what it should be.
                    //    For example, a statement found that the actual database version no longer matched the
                    //    expected version of the Database or DatabaseSync object, or the Database.changeVersion()
                    //    or DatabaseSync.changeVersion() methods were passed a version that doesn't match the actual database version.
                    return "DATABASE VERSION";
                case err.TOO_LARGE_ERR:
                    //The statement failed because the data returned from the database was too large. The
                    //    SQL "LIMIT" modifier might be useful to reduce the size of the result set.
                    return "RESULT TOO LARGE";
                case err.QUOTA_ERR:
                    //The statement failed because there was not enough remaining storage space, or the storage
                    //    quota was reached and the user declined to give more space to the database.
                    return "QUOTA EXCEEDED";
                case err.SYNTAX_ERR:
                    //The statement failed because of a syntax error, or the number of arguments did not match
                    //    the number of ? placeholders in the statement, or the statement tried to use a statement
                    //    that is not allowed, such as BEGIN, COMMIT, or ROLLBACK, or the statement tried to use a
                    //    verb that could modify the database but the transaction was read-only.
                    return "SYNTAX";
                case err.CONSTRAINT_ERR:
                    //An INSERT, UPDATE, or REPLACE statement failed due to a constraint failure. For example,
                    //    because a row was being inserted and the value given for the primary key column duplicated
                    //    the value of an existing row.
                    return "CONSTRAINT";
                case err.TIMEOUT_ERR:
                    //A lock for the transaction could not be obtained in a reasonable ti
                    return "TIMEOUT";
                default:
                    //The transaction failed for reasons unrelated to the database itself and not covered by any
                    //    other error code.
                    return "UNKNOWN";
            }
        }
        
        //Two types of error events can occur: transaction errors and SQL statement errors.
        
        /**
         * SQLTransactionErrorCallback - method raised by the db.transaction() or db.readTransaction() or db.changeVersion() methods when an error occurs within a transaction event.
         *          http://www.w3.org/TR/webdatabase/#sqltransactioner​rorcallback
         * @param err (SQLError) has two parameters: code (unsigned short), message (string) and constants
         *          http://www.w3.org/TR/webdatabase/#sqlerror
         */
        function handleTransactionError(err)
        {
            error("SQLTransactionError " + err.code + " [" + getSQLErrorName(err.code) + "] " + err.message);
        }
        /**
         * SQLStatementErrorCallback - method raised by the tx.executeSql() method when an error occurs within an SQL statement.
         *          http://www.w3.org/TR/webdatabase/#sqlstatementerro​rcallback
         * @param tx (SQLTransaction) has a single method: void executeSql(string sqlStatement, optional array args, optional SQLStatementCallBack callback, optional SQLStatementErrorCallback errorCallback)
         *          http://www.w3.org/TR/webdatabase/#sqltransaction
         * @param err (SQLError) has two parameters: code (unsigned short), message (string) and constants
         *          http://www.w3.org/TR/webdatabase/#sqlerror
         */
        function handleSQLError(tx, err)
        {
            //The tx parameter can be used to run another SQL statement (e.g. log a message to an error table)
            error("SQLStatementError " + err.code + " [" + getSQLErrorName(err.code) + "] " + err.message);
        }

        
        
        /**
         * The following are SQLStatementCallback methods raised after a records are inserted, updated, deleted selected from the DB.
         * @param tx (SQLTransaction) has a single method: void executeSql(string sqlStatement, optional array args, optional SQLStatementCallBack callback, optional SQLStatementErrorCallback errorCallback)
         *          http://www.w3.org/TR/webdatabase/#sqltransaction
         * @param result (SQLResultSet) contains three attributes: insertId (readonly long), rowsAffected (readonly long), rows (readonly SQLREsultSetRowList)
         *          http://www.w3.org/TR/webdatabase/#sqlresultset
         */
        function insertComplete(tx, result)
        {
            //The insertId attribute contains the ID of the row that was inserted into the database.
            //If a single statement inserted multiple rows, the ID of the last row is returned.
            success("insertComplete() - " + result.rowsAffected + " row(s) added (rowId =" + result.insertId + ")");
        }
        function updateComplete(tx, result)
        {
            //The rowsAffected attribute contains number of rows that were changed by the SQL statement.
            // SELECT statements do not modify rows, and therefore have a rowsAffected value of 0.
            success("updateComplete() - " + result.rowsAffected + " row(s) updated");
        }
        function deleteComplete(tx, result)
        {
            success("deleteComplete() - " + result.rowsAffected + " row(s) deleted");
        }
        function selectComplete(tx, result)
        {
            //The rows attribute is a SQLResultSetRowList object containing one paramter length (int) and one method .item(index)
            //  The same object must be returned each time. If no rows were returned, then the object will be empty (its length will be zero).
            //    http://www.w3.org/TR/webdatabase/#sqlresultsetrowl​ist
            var size = result.rows.length;
            success("selectComplete() - " + size + " row(s) returned");
        }

        
        
        
        /**
         * SQLStatementCallback methods raised after a SELECT statement is called.  Display results to the page.
         * @param tx (SQLTransaction) has a single method: void executeSql(string sqlStatement, optional array args, optional SQLStatementCallBack callback, optional SQLStatementErrorCallback errorCallback)
         *            http://www.w3.org/TR/webdatabase/#sqltransaction
         * @param result (SQLResultSet) contains three attributes: insertId (readonly long), rowsAffected (readonly long), rows (readonly SQLREsultSetRowList)
         *            http://www.w3.org/TR/webdatabase/#sqlresultset
         */
        function displayMessagesResults(tx, result)
        {
            var ele = document.getElementById("contents");
            var output = "";
            var size = result.rows.length;
            
            if (size === 0)
            {
                output += "<i>Empty</i>";
            }
            else {
                output += "<table cellspacing='0' cellpadding='0' border='0' width='100%'>";
                output += "<tr><th>id</th><th>message</th><th>created</th><t​h></th></tr>";
                for (var i = 0; i < size; i++)
                {
                    var item = result.rows.item(i);
                    var dt = new Date(item.created);
                    output += "<tr><td>" + item.id + "</td><td>" + item.message + "</td><td>" + dt.toLocaleDateString() + " " + dt.toLocaleTimeString() + "</td><td><a href='#' onclick=\"deleteRow('" + item.id + "')\">Delete</a></td></tr>";
                }
                output += "</table>";
            }
            
            if (ele)
            {
                ele.innerHTML = output;
            }
        }
        
        /**
         * Make the following logic its own method, so it can be called from various sources.
         */
        function displayMessages()
        {
            if (db)
            {
                db.transaction(function(tx) {
                                            tx.executeSql('SELECT id, message, created FROM Messages', [], displayMessagesResults, handleSQLError);
                                            }, handleTransactionError);
            }
        }
        
        /**
         * Called when the user clicks on the 'Add Message' button.
         */
        function addMessage()
        {
            var created = new Date().getTime();
            var message = document.getElementById("txtMessage").value;
            if (message === "")
            {
                error("Enter a message");
            }
            else {
                if (db)
                {
                    db.transaction(function(tx) {
                                                tx.executeSql("INSERT INTO Messages (message, created) VALUES (?, ?)", [message, created], insertComplete, handleSQLError);
                                                displayMessages();
                                                }, handleTransactionError);
                }
            }
        }
        /**
         * Called when the user clicks on the 'Delete' hyperlink.
         */
        function deleteRow(id)
        {
            if (db)
            {
                db.transaction(function(tx) {
                                            tx.executeSql('DELETE FROM Messages WHERE id = ?', [id], deleteComplete, handleSQLError);
                                            displayMessages();
                                            }, handleTransactionError);
            }
        }
        
        
        /**
         * SQLStatementCallback methods raised after the first table was created.  Add test data.
         * @param tx (SQLTransaction) has a single method: void executeSql(string sqlStatement, optional array args, optional SQLStatementCallBack callback, optional SQLStatementErrorCallback errorCallback)
         *     http://www.w3.org/TR/webdatabase/#sqltransaction
         * @param result (SQLResultSet) contains three attributes: insertId (readonly long), rowsAffected (readonly long), rows (readonly SQLREsultSetRowList)
         *     http://www.w3.org/TR/webdatabase/#sqlresultset
         */
        function firstCreateComplete(tx, result)
        {
            try
            {
                //Do not need to begin another transaction.  Since the active transaction object was
                //    provided as a parameter, it can now be reused to insert some test data:
                var created = new Date().getTime();
                tx.executeSql("INSERT INTO Messages (message, created) VALUES (?, ?)", ["Hello World A", created], insertComplete, handleSQLError);
                tx.executeSql("INSERT INTO Messages (message, created) VALUES (?, ?)", ["Hello World B", created], insertComplete, handleSQLError);
                tx.executeSql("INSERT INTO Messages (message, created) VALUES (?, ?)", ["Hello World C", created], insertComplete, handleSQLError);
                
                //Finally, display all rows in the table.
                displayMessages();
            }
            catch(ex) {
                error("exception (firstCreateComplete): " + ex);
            }
        }
        
        /**
         * DatabaseCallback method invoked when the Database is first created. Designed to initialize the schema by creating necessary table(s).
         *     http://www.w3.org/TR/webdatabase/#databasecallback
         * @param database (Database) - reference to the DB object that was creatd
         *     http://www.w3.org/TR/webdatabase/#database
         */
        function createTableOnNewDatabase(database)
        {
            try
            {
                if (database)
                {
                    database.transaction(function(tx) {
                                                      //The following method is asyncronous, perform record insert statements within the callback method after table has been created successful
                                                      tx.executeSql("CREATE TABLE IF NOT EXISTS Messages (id INTEGER PRIMARY KEY, message TEXT, created TIMESTAMP)", [], firstCreateComplete, handleSQLError);
                                                      }, handleTransactionError);
                }
            }
            catch(ex) {
                error("exception (createTableOnNewDatabase): " + ex);
            }
        }


        
        /**
         * Called by page load event.  Opens DB reference and displays contents of Messages table
         */
        function initPage()
        {
            try
            {
                
                //Assign 2MB of space for the database
                var dbSize = 2 * 1024 * 1024;    
                db = window.openDatabase("WebDBSample", "1.0", "HTML5 Database API example", dbSize, createTableOnNewDatabase);
                
                if (db != null)
                {
                    displayMessages();
                }
            }
            catch(e) {
                error("exception (initPage): " + e);
            }
        }
    </script>