Question

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

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中添加的内容。

有人可以帮忙吗？

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



});

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

1 个答案: