show data in listview pulling from DB

Question

trying to use data-filter attribute of listview but its working like a plain html listview getting some errors regarding "refresh" of listview HTML code:

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

(have written in alldatabsae.js file) JQUERY CODE to pull data from localDB and display only username in 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");   
}

but getting errors:
1. Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' at http://code.jquery.com/jquery-1.8.2.min.js:2
2. Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' at file:///android_asset/www/js/lib/jquery.js:506 getting error in this line of code

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

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You should use:

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

Because listview is dynamically created and don't exist in reality it first must be initialized before its markup can be enhanced.

To find out why take a look at my other answer: jQuery Mobile: Markup Enhancement of dynamically added content. Search for chapter: Markup enhancement problems:

edited May 23 '17 at 10:25

Community

1
1

answered Apr 04 '13 at 12:36

Gajotres

57,309
16
102
130

thanks for your reply anyways my code is working fine.i was getting error just because of jquery plugins. i have managed the plugins and now its working fine – Erum Apr 06 '13 at 11:30

score 1 · Answer 2 · answered Apr 05 '13 at 06:50

Just replace below function in your code.

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

thanks for your reply anyways my code is working fine.i was getting error just because of jquery plugins. i have managed the plugins and now its working fine – — Erum, Apr 06 '13 at 11:30

show data in listview pulling from DB

2 Answers2