CODEWITHSUNDEEP
javascriptcordovajquery-mobile
dsaa
dsaa

Reputation: 487

JQuery Mobile has no method 'listview()'

The code below shows a function cacheListPrint() which is called from an onclick element of a button on the 'home' page of a JQuery Mobile framework using Phonegap.

The HTML below shows the target page which is loaded from the href element of the 'home' page.

The cacheListPrint() function retrieves data from an SQLLite database which is then used to dynamically create and populate an unordered list as a JQuery viewlistelement.

When the page loads, the viewlist isn't formatted and just shows a text heading and image for each element retrieved from the database. Data is being displayed and is consistent with what is requested from the database - so I know the list is successfully created, it just fails to render properly.

I have tried using $('#placeslist').viewlist(); & $('#placeslist').viewlist('refresh'); at the location where the .trigger('create') reference is currently made. Neither of them work. I have also tried moving the .trigger('create') statement up to the line just below where the <ul> is declared.

Furthermore, when calling either of the viewlist(...) functions, the following error is thrown in the Eclipse debugging terminal:

Uncaught TypeError: Object [object Object] has no method 'listview' - obviously indicating that viewlist is an unknown method call.

function cacheListPrint() {
            db.transaction(queryDBPrint, errorCB);

        }

        function queryDBPrint(tx) {
            tx.executeSql('SELECT * FROM cache', [], querySuccessPrint, errorCB);
        }

        function querySuccessPrint(tx, results) {
                $('#placeslistcontainer').empty();
                $('#placeslistcontainer').html('<ul id="placeslist" data-filter="true"></ul>');

                $.each(results.rows, function(index){
                    var row = results.rows.item(index);
                    $("#placeslist").append('<li><a href="#"><h1>'+row['name']+'</h1><img src="'+row['image']+'" /></a></li>');
                });
                $("#cachelist").trigger('create');
        }

        function errorCB(err) {
            alert("Error processing SQL: "+err.code);
}



<div data-role="page" id="cachelist" data-transition="none"> <!-- Start of cache list screen -->
        <header data-role="header">
            <h1>Cache List</h1>
            <a href="#home" data-icon="home" data-transition="none">Home</a>
        </header>
        <div data-role="content" id="placeslistcontainer">

        </div>
        <footer data-role="footer" data-position="fixed">
        </footer>
</div> <!-- End of cache list screen -->

I've read quite extensively through the JQuery Mobile API and spent a number of hours googling this problem - many of the suggestions 'out there' make sense when considering them, but don't work when implemented. I'm quite confident at implementing suggestions, but JQuery and Javascript are relatively new languages for me - so a basic breakdown of what is necessary would be appreciated.

Upvotes: 3

Views: 504

Answers (2)

Joe&#39;s Ideas
Joe&#39;s Ideas

Reputation: 550

I had the same error message. Fixed for me after I wrapped all of my app code in the deviceready event, as Phonegap says is important: http://docs.phonegap.com/en/2.9.0/cordova_events_events.md.html#Events

Upvotes: 0

Jaya Mayu
Jaya Mayu

Reputation: 17257

try this and see

$("#placeslistcontainer ul").listview();

listview("refresh"); seems to work when u update an existing listview.

Upvotes: 1

Related Questions