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:

view plain print about
1$('#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:

view plain print about

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:

view plain print about

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.

Related Blog Entries

Comments (3)

  • Jquery newbie

    Thanks !!!

    #1Posted by Jquery newbie | Apr 5, 2012, 02:58 AM
  • 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.

    #2Posted by Some guy that didn't know this | Jun 14, 2013, 04:22 PM
  • 1011

    Thanks my friend. :)

    #3Posted by 1011 | Jul 4, 2013, 03:43 AM