jquery-mobile , phonegap, dynamic data not displaying - jquery-mobile

Question

Here is my code for dynamically creating a div and populating it from Phonegap database
But (a)it does not add the dynamic part from database. (b) the Rows: entry is printed in debugger console after the html content is dumped. ie. there seems to be lack of synchronisation:
var newPage;
var qry="SELECT literal,kunyomi from kanji where Unicode in(select b.Unicode from kanji_reading b where substr(b.kunyomi,1,1)='"+yomi+"')";
db.transaction(function (tx)
{
newPage = "<div data-role=page data-url=hi><div data-role=header><h1>" + yomi+ "</h1></div><div data-role=content>";
newPage +="<ul data-role='listview' id='details'>";
var temp="";
tx.executeSql(qry, [], function(tx,res)
{
var i;
var len = res.rows.length;
console.log("records"+len);
for (i=0; i<len; i++)
{
newPage+="<li><span class='tra-info-text'>"+res.rows.item(i).kunyomi+"</span></li>";
}
newPage+="</ul></div></div>";
},null);
var page=$(newPage);
console.log("page:"+page);
console.log("New Page:"+newPage);
console.log("page container:"+$.mobile.pageContainer);
page.appendTo($.mobile.pageContainer);
$.mobile.changePage( page );
});
The out put of console.log("New Page:"+newPage); only shows the static part i.e before the tx.executeSQL part. Whatever is added within the tx.executeSQL is not displayed.
Can anyone help?

Answer 1

The SQL query is asynchronous, meaning the end of your code (starting with var page = $(newPage)) will most likely be executed before your transaction is complete. You should make sure that the rest of your code is executed AFTER the transaction, the simplest being to have it in the callback of your SQL transaction.
db.transaction(function (tx)
{
newPage = "<div data-role=page data-url=hi><div data-role=header><h1>" + yomi+ "</h1></div><div data-role=content>";
newPage +="<ul data-role='listview' id='details'>";
var temp="";
tx.executeSql(qry, [], function(tx,res)
{
var i;
var len = res.rows.length;
console.log("records"+len);
for (i=0; i<len; i++)
{
newPage+="<li><span class='tra-info-text'>"+res.rows.item(i).kunyomi+"</span></li>";
}
newPage+="</ul></div></div>";
var page=$(newPage);
console.log("page:"+page);
console.log("New Page:"+newPage);
console.log("page container:"+$.mobile.pageContainer);
page.appendTo($.mobile.pageContainer);
$.mobile.changePage( page );
},null);
});