Question

Im working with Sencha touch and I am trying to update a panel after I get the data from my webdb… wouldnt think this would be hard but I am totally missing something here…

var returnHTML = getPresentations();

function getPresentations() {
returnHTML = "<ul>";

db = openDatabase("myDB", "", "TheDB", 500000);     
db.transaction(
    function (tx) {
        tx.executeSql("SELECT title FROM Presentations",
            [],
            function (transaction, results) {
                var returnHTML = "<ul>";
                for (var i = 0; i < results.rows.length; i++) {
                    returnHTML += "<li>" + results.rows.item(i).title + '</li>';
                }
                returnHTML += "</ul>";
            },
            onError);
    },
        onTransactError,
        onTransactSuccess);
}

function onTransactSuccess() {
    alert(returnHTML);
    console.log(returnHTML);
    extPanel.update();
}

But returnHTML keeps coming back as undefined… not really sure what is happening here.

I watch it go through my SELECT function… its a complete string before its done. What am I missing?

Answer 1

There are several issues here. The first is an issue of scope. You’re creating a new returnHTML within the scope of your function by using the var keyword. Remove the var keyword inside of your function so you’re setting the previously created instance of returnHTML

This:

var returnHTML = "<ul>";

Should be:

returnHTML = "<ul>";

In addition, it appears that you’re not actually returning the value of returnHTML from your function. Simply add return returnHTML to the end of your function.

...
},
        onTransactError,
        onTransactSuccess);

    //Add this line
    return returnHTML;
}