jQuery lets you manipulate control contents at runtime, for example, you can add and items to an ordered or unordered list using code like this:
$('#myList').append('<li>Some text</li>');
If you do this in jQuery Mobile, you must then force the control to refresh so that formatting and styles are reapplied, like this:
$('#myList').listview('refresh');
Simple, right? Well, not always. One of my lists contains collapsible items created using data-role="collapsible". And for some reason that I have yet to determine, when listview('refresh') refreshed the control it did not refresh the collapsible data-role, so all data was displayed, head and collapsible content, in one mess.
The solution? I had to call the collapsible() method on each list item that needed to be collapsible in addition to doing the refresh. I used jQuery .find() to find all <li> controls with a data-role of "collapsible", and then called .collapsible({refresh:true}) for each, like this:
$('#myList').listview('refresh');
$('#myList').find('li[data-role=collapsible]').collapsible({refresh:true});
Obviously, to use this code with other controls you'd need to change 'li[data-role=collapsible]' to reflect the HTML control you are using.
Again, I have yet to figure out why this is necessary. But, it is, and it works.
