0

尝试使用 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');
4

2 回答 2

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");}
}
于 2013-04-05T06:50:36.857 回答
1

你应该使用：

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

因为 listview 是动态创建的，实际上并不存在，所以必须先初始化它，然后才能增强它的标记。

要了解为什么请查看我的其他答案：jQuery Mobile：动态添加内容的标记增强。搜索章节：标记增强问题：

于 2013-04-04T12:36:40.073 回答