Refreshing listviews in jQuery Mobile

When dynamically creating or updating a list in jQuery Mobile; either via AJAX or by other means, one must take care to explicitly invoke the target listview widget to “refresh” in order to instruct the framework to apply the augmented markup and styles to the corresponding elements of the underlying list.

For example, consider the following simplified example which creates an li element for each item in an Array:

While this will create the list items and add them to the target listview ul element, JQM will not auto enhance the newly added items unless instructed to do so. I imagine this is due to a necessary design decision as, constantly monitoring the DOM for changes would certainly incur a performance hit.

In order to correct this, we just need to invoke .listview("refresh"); after appending the new elements to the list. This will notify JQM to apply the expected enhancements. And so, the following example will result in the expected list enhancements being applied:

You can try an example which demonstrates both of the above implementations here.

{ 6 comments to read ... please submit one more! }

  1. Great example..
    thanks for the share..

  2. we are implementing this idea in http://m.soundboard.com and subsequently to the entire website. Thanks for such a good article.

  3. Thanks u helped me saved my time

  4. What if you add list items dynamically (say friends go online and offline in a chat list) and after e.g. an item has been added you refresh. I got into trouble with this because the last (old) item had round edges and an new item was added to it. So JQM did something strange and after the refresh the list was broken. The old last element had still rounded bottom edges and the new element was added to it also with rounded edges.

  5. Hmm, the example is creating and appending the lists dynamically. I’ve also updated the example to allow for adding and removing items similar to that which you have described. In all cases, invoking refresh works.
    http://code.ericfeminella.com/articles/examples/jqm/listview/index.html

    Perhaps the issue you’ve experienced may be specific to a particular device/browser or something which you have overridden such as default styles etc?

  6. Thank you for your code. It was very helpfull.

{ 0 Pingbacks/Trackbacks }