CODEWITHSUNDEEP
jqueryjquery-mobile
jgauffin
jgauffin

Reputation: 101140

Theme programmatically added items

I'm adding items to a jquery mobile listview problematically. I'm currently using jquery templates to give the new items the jqmobile design.

I would however like to let jQuery mobile style those items. Is it possible? If so, how do I tell jQuery to style the items?

Upvotes: 1

Views: 589

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85308

You could refresh the jQM controls

Updating lists
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:

$('#mylist').listview('refresh');

Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.

If you need to refresh the whole page look at these docs

Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

Upvotes: 2

Related Questions