AdobeStock_455007340

jQuery Mobile Collapsible Control Refresh Gotcha

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 responses to “jQuery Mobile Collapsible Control Refresh Gotcha”

    1. Jquery newbie Avatar
      Jquery newbie

      Thanks !!!

    2. Some guy that didn't know this Avatar
      Some guy that didn’t know this

      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.

    3. 1011 Avatar
      1011

      Thanks my friend. 🙂

    Leave a Reply