0

I've been buried in jQuery Mobile code and documentation for a while now, but I just can't seem to figure this out.

I have a listview in my jQM site. It's nothing very complicated, but I want to add items to the list as the user scrolls down. I have the code to load them in all working, but once they're added into the list, they're not styled as part of the jQM list.

Here's what I have so far (also at http://jsfiddle.net/justinrussell/H2DzB/):

var items = [
{
    'id': 2,
    'title': 'Some item',
    'desc': 'This is something.'
},
{
    'id': 3,
    'title': 'An added item',
    'desc': 'Another item!'
}
];

var $listElem = $('#home').find('ul');

$.each(items, function(i, item) {
    $('<li />').append(
        $('<a />').attr('id', 'item_' + item.id).attr('href', 'item.php?item=' + item.id).append(
            $('<h3 />').text(item.title).addClass('ui-li-heading'),
            $('<p />').text(item.desc).addClass('ui-li-desc')
        )
    ).appendTo($listElem).trigger('create');
});

Now from what I've seen on other questions, it looks like .trigger('create') is the way to go. No matter where I try it, though (or .trigger('refresh') for that matter), it doesn't seem to style the elements fully. What am I missing?

(There may be a difference if I build the elements in HTML first instead of using jQuery for that, but I'd rather keep HTML out of my JavaScript. I don't see why it would matter by the time the elements have been added to the DOM, though.)

Community
  • 1
  • 1
Justin Russell
  • 1,009
  • 1
  • 9
  • 15

1 Answers1

3

After adding your items: $listElem.listview('refresh');

Ben Wilson
  • 545
  • 3
  • 5
  • Aha! I was getting .trigger and .listview confused. Thanks! – Justin Russell Sep 20 '11 at 13:55
  • No, you wasn't. .trigger('create') calls an event that causes jquery mobile to rebuild all its formatting. But it has to be called on $listElem as well. And you kept on calling it on li elements you added. – naugtur Sep 20 '11 at 17:35