When manipulating jQuery Mobile widgets programmatically - adding list items to an existing listview ul, for instance, or adding a new collapsible to the main content div of a page - after the pagecreate event has fired (or later, in response to some event), we need to call .listview('create') or .listview('refresh') (or, similarly, .collapsible('create') or .collapsible('refresh')) to handle the initialization or refreshing of the widgets. This ensures that the widgets transform into the enhanced version. See, for instance, the jQuery Mobile API documentation for the Listview widget. Let's look at a quick example.
This jQuery Mobile file displays a single page with a
listview containing, initially, two elements - links to Google and Yahoo!. Tapping the button (which has id
tap handler; we add a third element to the list, a link to Bing.
Notice that the call to
$("#mylist").listview("refresh") is commented out. A tap on the button does indeed add the "Bing" element, but you will notice that the added element isn't styled like the existing two list items - it doesn't bear the border, padding, and right icon as do the "Google" and "Yahoo!" elements.
If we uncomment the call to
$("#mylist").listview("refresh") and try again, now we see that the element is added to the
listview and, with the call to
listview("refresh"), the style of added third list item is cleaned up to match what we would expect for a jQuery Mobile
In this next exercise, you will add some orientation effects to the Nan & Bob's site.
jQuery Mobile exposes many more user-action and page events; see the jQuery Mobile docs for a full list.