Refreshing javascript objects with externally loaded content in innerhtml

Question

When I try to load in a collapsible it doesn't work when it is loaded in via javascript. but it does work when I hardcode it in.

I have the following code

var VeilingenZoeken = document.getElementById("VeilingenZoeken");

function getZoekResultaten() {
    // console.log(rubriekenzoeken.value);
    const url = "backend/veilingen/VeilingenZoekresultaat.php?q=" + VeilingenZoeken.value;
    fetch(url)
        .then(
            response => response.text()
        ).then(
        html => document.getElementById("veilingItems").innerHTML = html
    );
}

That gets called by this html tag

<input class="center" type="text" placeholder="Veilingen zoeken..." name="VeilingenZoeken"
               id="VeilingenZoeken" onkeypress="getZoekResultaten();"> <br>

It will load in the following piece of html

<div class="col s12">
   <ul class="collapsible">       
      <li>
         <div class="collapsible-header"><i class="material-icons">gavel </i> Gebruikersnaam: <span class="badge"><i  class="material-icons white">info</i></a></span><a class="waves-effect waves-light btn-large" href="#">Wave</a></div>
      </li>
  </ul>

However, the collapsible function doesn't work when it is loaded in this way. Is there any way to force it to load?

NOTE: I think the title is a bit confusing, but I don't have any idea what else would be a suitable title for this post.

Answer 1

You can manually initialize collapsible elements by calling M.Collapsible.init() or collasible() when using jQuery

https://materializecss.com/collapsible.html#intialization

Initialization

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.collapsible');
  var instances = M.Collapsible.init(elems, options);
});

// Or with jQuery

$(document).ready(function(){
  $('.collapsible').collapsible();
});

So just call either after loading your content

var container = document.getElementById("veilingItems");
fetch(url)
 .then(response => response.text())
 .then(html => {
   container.innerHTML = html;
   M.Collapsible.init(container.querySelector('.collapsible'));
   //or if using jQuery
   $('.collapsible').collapsible();
 });

Demo

var html = `<ul class="collapsible">
    <li>
      <div class="collapsible-header">
        <i class="material-icons">gavel</i> Gebruikersnaam:
        <span class="badge">
          <i class="material-icons white">info</i> 
        </span>
        <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      </div>
      <div class="collapsible-body">Body</div>
    </li>
    <li>
      <div class="collapsible-header">
        <i class="material-icons">gavel</i> Gebruikersnaam:
        <span class="badge">
          <i class="material-icons white">info</i> 
        </span>
        <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      </div>
      <div class="collapsible-body">Body</div>
    </li>
  </ul>`;
var container = document.getElementById("veilingItems");
document.querySelector('button').addEventListener('click', () => {
  container.innerHTML = html;
  var collapse = container.querySelector('.collapsible');
  M.Collapsible.init(collapse);
});

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<div id="veilingItems"></div>
<button>Load</button>