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

  • Some text
  • ');
    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

  • 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.
  • 3 thoughts

    1. After bashing my head in with exhaustive searches to fix this, I just have to say thanks. I’ve found the same thing needs to be done with each button within the collapsibles(within the list). You’d think calling refresh on a container would refresh each child, but apparently not. Thanks again.

    Leave a Reply