All geek questions in one place

Proper formatting when adding dynamic content to jQuery mobile

I am trying to dynamically add some content to a list of checkboxes in a collapsible <li> element in jQuery Mobile. I cannot get the correct formatting with beautiful rounded corners and grouped elements. This gets even worse when I add other elements at the sheet level.

Here's an example that shows the problem (add jquery and jquerymobile scripts and CSS to the header explicitly):

 <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 adding .page() after calling append() , but it did not work properly, although a little better.

Aside from my example, the general question is how to dynamically add content to the DOM tree after jQuery Mobile starts working with the DOM structure. I believe that there is a function that "jquerymobilizes" part of the tree, but I can not find it.

Many thanks for your help!

EDIT: In short, I'm trying to dynamically add elements to a single <li> listview element and not try to add elements to the list. Updating listview doesn't help here.

EDIT 2: I get a little closer since I found a .trigger("create") function that can be attached to .append() (cf JQM FAQ ). It works a little better with the following script, although data-role="controlgroup" does not provide proper formatting with good rounded fields.

 $("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");

I will send a full answer if I get there at some point.

EDIT 3: Here is my example illustrated in jsFiddle

+6
source share
3 answers

I think I can answer my question, so this is what I got:

  • to dynamically add elements to jQuery for mobile devices .trigger("create") (cf. jQuery Mobile FAQ )
  • to add them to the collapsible part of the discarded element, add it to div.ui-collapsible-content or create a div container inside the ex ante div.ui-collapsible-content part so that you directly add content.
  • in order to get a good rendering of the grouped flags, you have to add all the flags at once (I could not get smooth rounded corners when I added them sequentially

So here is my last script that does what I need:

 $("#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");

Hope this helps!

+5
source

This issue occurs because after adding dynamic content to listview, the mobile jquery classes may not apply to your list. so try one of the following:

 $('#listList').listview('refresh'); //which refresh your list view $('#listList').listview('refresh',true); //which rebuilds the listview with your new content
+3
source

Not quite sure what I'm following. You are more looking for how to apply the appropriate style. If so, you will need to use:

 $('#mylist').listview('refresh');

This will be after adding new items to your list.

+1
source

Source: https://habr.com/ru/post/909408/

More articles:


All Articles