Question

I am struggling to get JQM to reinitialize a jquery page with a listview that contains form fields.

One of the form elements is initialized as part of JQM’s normal initialization process, that is displaying correctly with all the correct class applied to all elements.

The others are all added dynamically using JQ’s append

When elements are added dynamically I cannot find the correct method to reinitialize the list to apply the styling to everything, the fieldcontain div the label & the textarea.

I have prepared an example to show the different methods to reinitialize the elements that I’ve tried based on other questions found on SO and around the web.

http://jsfiddle.net/robaldred/UPsQr/

In my example, row 5 is correctly initialize, however it requires calling the fieldcontain() method the textinput() method and manually add the ui-input-label class to the label. This feels like a lot of messing about, I must be missing something.

Answer 1

Trigger a create event on the page like this:

$("#page").trigger("create");

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.

Referenece: http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

Updated your fiddle – http://jsfiddle.net/UPsQr/2/