Refreshing the DOM

Contact Us or call 1-877-932-8228
Refreshing the DOM

Refreshing the DOM

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.

Code Sample:


Code Explanation:

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 addbing) triggers a call to the JavaScript 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 listview:

listview refresh

In this next exercise, you will add some orientation effects to the Nan & Bob's site.

Further Reading on Events

jQuery Mobile exposes many more user-action and page events; see the jQuery Mobile docs for a full list.