Menu
I am trying to dynamically add some content to a list of checkboxes in an collapsible <li> item in jQuery Mobile. I cannot get the proper formatting with the nice rounded corners and the grouped items. It gets even worse when I add other elements at the leaf level.
Here is an example that shows the problem (add jquery and jquerymobile scripts and CSS in the header obviously):
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
<li id="list1" data-role="collapsible">
<h3>list 1</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id="fs1">
<input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li>
<li id="list2" data-role="collapsible">
<h3>list 2</h3>
<p>here comes another list of checkboxes...</p></li></ul>
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div>
</body>
<script>
function addCheckbox() {
$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>');
}
</script>
I tried to add .page() after the call to append()but it did not work properly though a bit better.
Beyond my example, the generic question is how to dynamically append content to the DOM tree after jQuery Mobile has played around with the DOM structure. I believe there exists a function that "jquerymobilizes" part of the tree but I cannot find it.
Thanks a lot for your help!
EDIT: In short, I am trying to dynamically add elements into one <li>element of the listview and not trying to add elements to the list itself. Refreshing the listview does not seemt o help here.
EDIT 2: I am getting a bit closer as I found the .trigger("create") function that can be chained to .append() (cf JQM FAQ). With the following script it works slightly better though the data-role="controlgroup" does not provide the right formatting with nice rounded boxes.
$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");
I will post the full answer if I get there at some point.
EDIT 3: Here is my example illustrated in jsFiddle
560
I think I could answer my own question so here is what I got:
.trigger("create") (cf. jQuery Mobile FAQ)div.ui-collapsible-content or create a div container within the collapsible part ex ante so you add the content directly thereSo here is my final script that does what I needed:
$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">'
+'<input type="checkbox" id="cb1" /><label for="cb1">text</label>'
+'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>'
+'<a href="index.html" data-role="button" data-icon="delete">Delete</a>')
.trigger("create");
I hope it helps!
135
This problem is because of , after you append the dynamic content to listview , the jquery mobile classes may not applying for your listview . so try any of the following
$('#listList').listview('refresh'); //which refresh your list view
$('#listList').listview('refresh',true); //which rebuilds the listview with your new content
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
