在从数据库中提取的列表视图中显示数据答案

【问题标题】：show data in listview pulling from DB在从数据库中提取的列表视图中显示数据
【发布时间】：2013-04-04 12:35:39
【问题描述】：

试图使用 listview 的 data-filter 属性，但它的工作方式就像一个普通的 html listview 得到一些关于 listview 的“刷新”的错误 HTML 代码：

<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="css/app/app-style.css"/>
<link rel="stylesheet" href="css/lib/jquery.mobile.structure-1.1.1.css"/>
<link rel="stylesheet" href="css/lib/jquery.mobile.theme-1.1.1.css"/>
<link rel="stylesheet" href="css/lib/simpledialog.min.css"/>
<link rel="stylesheet" href="css/lib/jquery-ui-1.10.2.custom.css"/>
<link href="css/lib/mobiscroll.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.10.2.custom.js"></script>
<!-- <script type="text/javascript" src="js/lib/jquery.mobile-1.1.1.js"></script> -->
<script type="text/javascript" src="js/lib/jquery.validate.js"></script>
<script type="text/javascript" src="js/lib/additional-methods.js"></script>
<script type="text/javascript" src="js/lib/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/lib/jqm.page.params.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" defer>     
$(document).ready(function()
{ $('#viewtag').on('click',function(e)
    {
        e.preventDefault();
        getRegisterdUser();
        $('#viewinformation').show();
    });
});
</script>
</head>
<body>
    <div data-role="page" id="logininfo" data-theme="b">
        <div data-role="content">
            <div class="ui-grid-a" data-theme="a">
                <div class="ui-block-a" data-theme="e" style="width:50%;"><a href="#" id="viewtag" data-role="button">VIEW</a></div>
            </div>
        </div>
    </div>
    <div data-role="page" id="viewinformation" data-theme="d">
        <div data-role="header"> </div>
        <div data-role="content">
            <ul id="list" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..."  data-filter-theme="e" style="margin-top:20%;">
            </ul>
        </div>
    </div>
</body>
</html>

（已写入 alldatabsae.js 文件）JQUERY CODE 从 localDB 中提取数据并在列表视图中仅显示用户名

 var db;
   function getRegisterdUser()
{
    var query = 'SELECT username FROM loginTable';
    console.log("query for username selection:" + query);
    db.transaction(function(tx)
   {
    tx.executeSql(query,[],successCBofUsername,errorCBofUsername)
   },errorCB,successCB);

}

function successCBofUsername(tx,results)
{  
    var resultslength = results.rows.length;
    if(results!= null && results.rows.length > 0 && results.rows != null)
        {
        for(var i = 0; i <resultslength; i++)
            {
            var name = results.rows.item(i);
            $('<li>'+ name.username +'</li>').appendTo($('#list'));
            }
        $('#list').listview('refresh');
         //$('#displayinfo').empty().append('html').trigger('create');
        }

    else
        {alert("no records exists");}
}
function errorCBofUsername()
{
alert("error of usernmae query");   
}

但出现错误：
1.未捕获的错误：无法在初始化之前调用listview上的方法；试图在http://code.jquery.com/jquery-1.8.2.min.js:2调用方法“刷新”
2.未捕获的错误：无法在初始化之前调用listview上的方法；试图在file:///android_asset/www/js/lib/jquery.js:506 调用方法“刷新” 在这行代码中出现错误

$('#list').listview('refresh');

【问题讨论】：

标签： html jquery-mobile jquery-plugins markup jquery-mobile-listview

【解决方案1】：

只需在你的代码中替换下面的函数。

function successCBofUsername(tx,results)
{   var listdata='';
    var resultslength = results.rows.length;
    if(results!= null && results.rows.length > 0 && results.rows != null)
        {
        for(var i = 0; i <resultslength; i++)
            {
            var name = results.rows.item(i);
            listdata+='<li>'+ name.username +'</li>';
            }

           $("#list").append(listdata).listview('refresh');  
            }

    else
        {alert("no records exists");}
}

【讨论】：

感谢您的回复，无论如何我的代码工作正常。我只是因为 jquery 插件而出错。我已经管理了插件，现在它工作正常 -

【解决方案2】：

你应该使用：

$('#list').listview().listview('refresh');

因为 listview 是动态创建的，实际上并不存在，所以在增强其标记之前必须先对其进行初始化。

要找出原因，请查看我的其他答案：jQuery Mobile: Markup Enhancement of dynamically added content。搜索章节：标记增强问题：

【讨论】：

感谢您的回复，无论如何我的代码工作正常。我只是因为 jquery 插件而出错。我已经管理了插件，现在它工作正常