jQuery Forum

I have an existing nested UL:

1. <ul class="one">
2.    <li>something</li>
3.    <li>something
4.          <ul class="two">
5.          </ul>
6.    </li>
7. </ul>

Now based on user input I want to dynamically insert a set of LI's into UL class="two", using ajax, which include form elements and collapsible content. After inserting the content I was having problems getting it to style and discovered that in order to style list items, you use listview("refresh"). But in order to style the collapsible content, you have to use page() on a parent item. So here's what I did:

I inserted the following into ul.two:

1. <li>one something</li>
2. <li>two something</li>
3. <li class="placeholder">
4.     <div data-role="collapsible" data-collapsed="true">
5.         <h3>Some Title</h3>
6.         <p>This is some text</p>
7.     </div>
8.     <div data-role="collapsible" data-collapsed="true">
9.         <h3>Form Title</h3>
10.         <form>
11.            <label for="someid">some label</label>
12.            <input type="text" id="someid" />
13.            <input type="submit" value="submit" />
14.         </form>
15.     </div>
16. </li> 

After inserting the content dynamically, it isn't styled. Well, in order to style the LI elements, you call:

1. $('.two').listview('refresh');

Now here's the part that I was hung up on - the collapsible content will not be styled - only the LI that contains them: class="placeholder". In order to style the collapsible content itself, you then have to call page() on the placeholder LI that contains it:

1. $('.placeholder').page();

That is what I did, and that is currently what is working. I know others are having similar problems because normally the browser takes care of such things but as one very helpful forum member pointed out in a different thread, you aren't really just adding normal content to the DOM with jquery mobile, it's more like you're adding dynamic content to a widget and you have to re-initialize or refresh the widget. That explanation helped me a lot. 

I would like some opinions regarding how fragile this code might be, and whether or not this may stop working in the near future as jquery mobile moves toward 1.0 final. I would also appreciate a bit of insight into the differences between listview() and page(), and why listview() doesn't style content contained within each LI. Lastly, any insights regarding the differences between using nested lists vs pages for navigation. It appears about the same visually to the user, but I was wondering about performance issues using too many levels of nested lists vs. creating different pages and passing variables between them. 

Thanks so much. The amount of time, effort, and coding expertise involved in jquery, jquery ui, and jquery mobile is simply astounding and makes my head spin. I can't thank all of you guys and gals enough for what you've done for web development - it's truly amazing.