Question

尝试使用listview的数据过滤器属性，但它的工作方式与普通的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中提取数据并仅显示listview中的用户名

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

Answer 1

您应该使用：

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

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

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

Answer 2

只需在代码中替换以下功能即可。

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

从DB中提取listview中的数据

2 个答案: