Question

I’m trying to use html5’s web-database using phonegap for an iOS app for the first time. But I’m stuck at this error which says “result of expression mybd.transaction is not a function”

If I check using alerts, initDB is getting executed but when it comes to createTables function, the above error rises and I’m helpless from thereon.

I’ve used this implementation -> http://wiki.phonegap.com/w/page/16494756/Adding%20SQL%20Database%20support%20to%20your%20iPhone%20App

<script type="text/javascript">
    function validateFloat()
    {
        var mydb=false;
        var fuelUnits = document.myForm.UnitsOfFuel;
        var bFuelUnits = false;
        var bUnitPrice = false;
        switch (isNumeric(fuelUnits.value))
        {
            case true:
            bFuelUnits = true;
            fuelUnits.style.background="white";
            break;
            case false:
            fuelUnits.focus();
            fuelUnits.style.background="yellow";
            break;
        }
        var unitPrice = document.myForm.PricePerUnit;
        switch (isNumeric(unitPrice.value))
        {
            case true:
            bUnitPrice = true;
            unitPrice.style.background="white";
            break;
            case false:
            unitPrice.focus();
            unitPrice.style.background="yellow";
            break;
        }
        if(bFuelUnits && bUnitPrice)
        {
            if(initDB(mydb))
            {
                if(createTables(mydb))
                {   
                    loadCelebs();
                    return true;
                }
                else
                    return false;
            }
            else
                return false;
        }
        else
        {
            return false;
        }
    }
    function isNumeric(n)
    {
        var n2 = n;
        n = parseFloat(n);
        return (n!='NaN' && n2==n);
    }

    // initialise the database

    function initDB(mydb) 
    {
        try 
        { 
            if (!window.openDatabase) 
            { 
                alert('not supported'); 
                return false;
            } 
            else 
            { 
                var shortName = 'phonegap'; 
                var version = '1.0'; 
                var displayName = 'PhoneGap Test Database'; 
                var maxSize = 65536; // in bytes 
                mydb = openDatabase(shortName, version, displayName, maxSize);
                alert("initDB");
                return true;
            }
        } 
        catch(e) 
        { 
            // Error handling code goes here. 
            if (e == INVALID_STATE_ERR) 
            { 
                // Version number mismatch. 
                alert("Invalid database version."); 
                return false;
            } 
            else 
            { 
                alert("Unknown error "+e+"."); 
                return false;
            } 
            return true; 
        } 
    }

    // db error handler - prevents the rest of the transaction going ahead on failure
    function errorHandler(transaction, error) 
    { 
        alert("errorHandler");
        // returns true to rollback the transaction
        return true;  
    }

    // null db data handler
    function nullDataHandler(transaction, results) 
    { 

    } 

    // create tables for the database
    function createTables(mydb) 
    {

        try 
        {
            mydb.transaction(

                             function(tx) {

                             tx.executeSql('CREATE TABLE celebs(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL DEFAULT "");', [], nullDataHandler(tx,results), errorHandler(tx,error)); 

                             tx.executeSql('insert into celebs (id,name) VALUES (1,"Kylie Minogue");', [], nullDataHandler(tx,results), errorHandler(tx,error)); 

                             tx.executeSql('insert into celebs (id,name) VALUES (2,"Keira Knightley");', [], nullDataHandler(tx,results), errorHandler(tx,error)); 

                             });
            alert("createTables");
            return true;
        } 
        catch(e) 
        {
            alert(e.message);
            return false;
        }
    }

    // load the currently selected icons
    function loadCelebs()
    {
        try 
        {
            mydb.transaction(
                function(tx) {
                tx.executeSql('SELECT * FROM celebs ORDER BY name',[], celebsDataHandler(tx,results), errorHandler(tx,error));
                });
        } 
        catch(e) 
        {
            alert(e.message);
        }
    } 


    // callback function to retrieve the data from the prefs table
    function celebsDataHandler(transaction, results) 
    {
        alert("here also?");
        // Handle the results 
        var html = "<ul>"; 
        for (var i=0; i<results.rows.length; i++) 
        { 
            var row = results.rows.item(i); 
            html += "<li>"+row['name']+"</li>\n";
        } 
        html +="</ul>";
        alert(html);
    }

</script>

Answer 1

You need to return the newly created mydb instance that is created within the initDB() function and then use the returned instance.

If you are reassigning a new value to a parameter that is passed into a function (which is what you are doing), it needs to be returned or the changes will be lost.

Note that if you are passing in an object to the function (which you are not doing), you can modify properties of that object and those changes will be persisted outside the scope of that function.

function initDB(mydb) {
    mydb.initialized = true;
}
mydb.initialized = false;
initDB(mydb);
// mydb.initialized => true

vs…

function initDB(mydb) {
    mydb = new DB(); // new reference
    mydb.initialized = true;
}
mydb.initialized = false;
initDB(mydb);
// mydb.initialized => false

Of course, you are also passing in a primitive boolean value, not an object. Primitives are passed by value so you must return the newly created mydb.

---

UPDATE

You are also using your passed-in transaction handlers wrong. Look at the phone gap wiki again to see how they are assigning the function references to variables and passing those references into the transaction methods. As it is now, you are calling the functions instead of passing them.

So, instead of this (what you are doing now):

function errorHandler(tx, error) {
    alert("error");
    return true;  
}
function nullDataHandler(tx, results) { }

tx.executeSql('insert into celebs (id,name) VALUES (1,"Kylie Minogue");', [], nullDataHandler(tx, results), errorHandler(tx, error));

do this:

var errorHandler = function (tx, error) {
    alert("error");
    return true;  
}
var nullDataHandler = function(tx, results) { }

tx.executeSql('insert into celebs (id,name) VALUES (1,"Kylie Minogue");', [], nullDataHandler, errorHandler);

I hope this clears it up. Also, remember, if this answered your question, upvote it and mark it as the answer for a reference to future visitors.