How do I tell jquery mobile to add classes to dynamically added form fields in a listview?

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/

Answer 2

Working Example:

http://jsfiddle.net/UPsQr/4/

JS

$('#add_element').click(function() {
    var list   = $('ul[data-role="listview"]');
    var nextLi = ((list.children().length) + 1);

    li = '<li><div data-role="fieldcontain"><label for="textarea'+nextLi+'">Input:</label><textarea id="textarea'+nextLi+'" name="textarea'+nextLi+'"></textarea></div></li>';
    list.append(li);
    list.listview('refresh');

    $('#page').trigger('create');
});

//$('#add_element').hide();

HTML

<html>
    <head>
    </head>
    <body>
        <div id="page" data-role="page">
            <!-- First field is done by jQM's normal initialization -->
            <!-- The Rest are added onload and appended to the listview -->
            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                        <label for="textarea1">Input:</label>
                        <textarea id="textarea1" name="textarea1"></textarea>
                    </div>
                </li>
            </ul>
            <a data-role="button" id="add_element">Add Fields</a>
        </div>
    </body>
</html>

NOTE:

jQM Supports jQuery 1.6.4

How do I tell jquery mobile to add classes to dynamically added form fields in a listview?

Question

2 answers

solution1
1 ACCPTED 2012-01-12 15:43:28

solution2
1 2012-01-12 15:53:05

How do I tell jquery mobile to add classes to dynamically added form fields in a listview?

Question

2 answers

solution1 1 ACCPTED 2012-01-12 15:43:28

solution2 1 2012-01-12 15:53:05

solution1
1 ACCPTED 2012-01-12 15:43:28

solution2
1 2012-01-12 15:53:05