CODEWITHSUNDEEP
javascripthtmlmaterialize
user8250085
user8250085

Reputation:

Materialize Collapsible Dont Open with Javascript

I'm inserting Collapsible into HTML as soon as it receives JSON and adds the information to it.

But Collapsible does not open, It only opens if I insert the same in HTML itself, but I can not leave it as I have to generate the results from JSON and thus create the Collapsibles for each object.

JAVASCRIPT:

function GeneratePeoples__(objJSON){
  for(cat in objJSON.categories){
    document.getElementById('peoples-information').innerHTML +=
    '<ul class="collapsible" data-collapsible="accordion">' +
      '<li>' +
        '<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>People ('+ cat +')</strong></div>' +
        '<div class="collapsible-body white">' +
          '<ul class="collection">' +
            '<li class="collection-item avatar">' +
              '<i class="fa fa-male circle blue" aria-hidden="true"></i>' +
              '<span class="title title-collection-content-information">Type of Categories</span>' +
              '<p><strong>'+ objJSON.categories[cat].name +'</strong></p>' +
              '<a href="#!" class="secondary-content">' +
                '<span class="new black badge" data-badge-caption=" "><strong>+ objJSON.categories[cat].score + '%' +</strong></span>' +
                '<span class="new black badge" data-badge-caption=" "><strong>Score</strong></span>' +
              '</a>' +
            '</li>' +
          '</ul>' +
        '</div>' +
      '</li>' +
    '</ul>';
  }
};

HTML

<div id="peoples-information"></div>

Upvotes: 1

Views: 143

Answers (1)

user8250085
user8250085

Reputation:

WORKING: 

function GenerateCelebrities__(objJSON){
      for(cat in objJSON.categories){
        for(cel in objJSON.categories[cat].detail.celebrities){
          document.getElementById('celebrities-information').innerHTML +=
          '<ul class="collapsible" data-collapsible="accordion">' +
            '<li>' +
              '<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>Celebrity ('+ cap++ +')</strong></div>' +
              '<div class="collapsible-body white">' +
                '<ul class="collection">' +
                  '<li class="collection-item avatar">' +
                    '<i class="fa fa-star circle yellow-text myDiv" aria-hidden="true"></i>' +
                    '<span class="title title-collection-content-information">Celebrity Name</span>' +
                    '<p><strong>'+ objJSON.categories[cat].detail.celebrities[cel].name +'</strong></p>' +
                    '<a href="#!" class="secondary-content">' +
                      '<span class="new black badge" data-badge-caption=" "><strong>'+ objJSON.categories[cat].detail.celebrities[cel].confidence +" %" +'</strong></span>' +
                      '<span class="new black badge" data-badge-caption=" "><strong>Confidence</strong></span>' +
                    '</a>' +
                  '</li>' +
                '</ul>' +
              '</div>' +
            '</li>' +
          '</ul>';
        }
      }
        $(document).ready(function(){
        $('.collapsible').collapsible();
      });

};

Upvotes: 2

Related Questions