jquery-mobile，phonegap，动态数据不显示答案

【问题标题】：jquery-mobile , phonegap, dynamic data not displayingjquery-mobile，phonegap，动态数据不显示
【发布时间】：2013-09-22 06:36:14
【问题描述】：

这是我用于动态创建 div 并从 Phonegap 数据库填充它的代码但是（a）它没有从数据库中添加动态部分。 (b) Rows: 转储 html 内容后，在调试器控制台中打印条目。 IE。似乎缺少同步：

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 );    

    });

console.log("New Page:"+newPage); 的输出仅显示静态部分，即在 tx.executeSQL 部分之前。不会显示在 tx.executeSQL 中添加的任何内容。

谁能帮忙？

【问题讨论】：

标签： jquery-mobile cordova

【解决方案1】：

SQL 查询是异步的，这意味着您的代码结尾（以var page = $(newPage) 开头）很可能会在您的事务完成之前执行。您应该确保其余代码在事务之后执行，最简单的方法是将其放在 SQL 事务的回调中。

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);



});

【讨论】：