CODEWITHSUNDEEP
jquery-mobilecordovahtml-lists
Yang
Yang

Reputation: 6892

phonegap jquerymobile issue: lost style when dynamically generating list items

I'm trying to generate a list dynamically from database. The results can be retrieved, however, jquerymobile style and data-role property seem to be lost. I see an ugly list instead of nicely rendered list:

I've tried to reproduce it using the simplest list item:

In my index.html, I have:

<ul data-role="listview" data-theme="d" data-divider-theme="d" data-inset="true" id="thisweekexpenselist"></ul>

In the javascript file, I have

function getExpenselist_success(tx, results) {
$('#busy').hide();
var len = results.rows.length;
for (var i=0; i<len; i++) {
    var expense = results.rows.item(i);
    $('#thisweekexpenselist').append('<li>Test Simplest</li>'); 
}   
db = null;

}

It does not render correctly at all.

Upvotes: 2

Views: 1916

Answers (2)

Rutz
Rutz

Reputation: 11

This helps:

$(document).bind('pagechange', function() {
  $('.ui-page-active .ui-listview').listview('refresh');
});

Upvotes: 1

codaniel
codaniel

Reputation: 5253

Try calling $('#thisweekexpenselist').listview('refresh'); at the end of the getExpenselist_success() function.

Upvotes: 5

Related Questions