Home/ Questions/Q 7594215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:21:36+00:00

I am trying to dynamically add some content to a list of checkboxes in

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I could answer my own question so here is what I got:

    • to dynamically add elements in jQuery Mobile use .trigger("create") (cf. jQuery Mobile FAQ)
    • to add them to the collapsible part of a collapsible element add it to div.ui-collapsible-content or create a div container within the collapsible part ex ante so you add the content directly there
    • to get the nice rendering of grouped checkboxes, you should add all the checkboxes at once (I could not get the sleek rounded corners when I added them sequentially

    So 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!

    • 0