CODEWITHSUNDEEP
javascriptcssjquery-uijquery-mobiledom
Hemantsom
Hemantsom

Reputation: 553

Populating a list of collapsible DIV dynamically from a loop

I am trying to add a collapsible DIV with the JQuery mobile CSS dynamically to a page.The list of DIVs and the associated content is populated in a for loop.

items.forEach(function (entity) {
  document.getElementById("auditListHolder").innerHTML = document.getElementById("auditListHolder").innerHTML +
    "<div data-role='collapsible' data-collapsed='false'>" +
    "<h3>" + entity.AuditName + "</h3>" +
    "<p>" + entity.Content + "</p>" +
    "</div>";
});

I tried using this code to add a DIV to existing set of DIVs on each iteration of the loop, but the DIV does not render as a collapsible DIV. The list appears as normal DIV with content as shown below:

enter image description here

Is there a problem with the code or can there be problem with CSS.

Upvotes: 1

Views: 913

Answers (2)

Omar
Omar

Reputation: 31732

Call widget enhancement .collapsible(); after appending elements dynamically.

$('selector').collapsible();

selector = [data-role=collapsible], #id, .class etc...

Upvotes: 1

Ricky Stam
Ricky Stam

Reputation: 2126

Try calling .trigger("create") on the element auditListHolder after the loop!

Upvotes: 1

Related Questions