Materialize Modals Not Working - php

Question

I am building a simple blogging application in php and html, and when i generate my modals (using the javascript fetch() command) with database data, the modal trigger does not work. Here is the generation code:
Javascript:
function RetrieveArticles() {
fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
document.getElementById('container-articles').innerHTML = data;
})
}
Php:
require('../../settings.php');
try{
/* Create a new PDO object */
$connect = new PDO("mysql:host=$databaseHost;dbname=$databaseName",
$databaseUser, $databasePassword);
/* set the PDO error mode to exception */
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
/* Redirect the user with errorcode 1: "Database settings are incorrect" */
header('location: ../pages/error.php?errcode=1');
exit();
}
$stmnt = $connect->prepare("SELECT * FROM blog_articles NATURAL JOIN article_text;");
$stmnt->execute();
$result = $stmnt->fetchAll(PDO::FETCH_ASSOC);
if(count($result) > 0){
foreach($result as $data){
echo "<div class='row'>";
echo "<div class='collection container-collection'>";
echo "<a class='blog-clicker modal-trigger' href='#$data[article_id]'>";
echo "<p>"."<span class='article-title'>".$data['article_name']."</span>"."<br/>"."By ".$data['article_user'].", ".$data['article_made']."</p>";
echo "</a>";
echo "</div>";
echo "</div>";
echo "<div id='$data[article_id]' class='modal'>";
echo "<div class='modal-content'>";
echo "<h5>".$data['article_name']."</h5>";
echo "<p>".$data['article_text']."</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<div class='divider'></div>";
echo "<button type='button' class='modal-close btn left indigo darken-3'>"."Close Article"."</button>";
echo "</div>";
echo "</div>";
}
}else{
echo "<p class='center-align'>"."No Articles Found"."</p>";
}
And this is how i gets displayed in the webbrowser:
<div id="blog-wrapper">
<div class="c-12" id="container-articles">
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884499GuylianWasHier">
<p><span class="article-title">Test Modal 1</span><br>By GuylianWasHier, 2018-06-01 20:21:39</p>
</a>
</div>
</div>
<div id="art1527884499GuylianWasHier" class="modal">
<div class="modal-content">
<h5>Test Modal 1</h5>
<p>This is a simple modal test</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884802GuylianWasHier">
<p><span class="article-title">12</span><br>By GuylianWasHier, 2018-06-01 20:26:42</p>
</a>
</div>
</div>
<div id="art1527884802GuylianWasHier" class="modal">
<div class="modal-content">
<h5>12</h5>
<p>12</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884806GuylianWasHier">
<p><span class="article-title">1234</span><br>By GuylianWasHier, 2018-06-01 20:26:46</p>
</a>
</div>
</div>
<div id="art1527884806GuylianWasHier" class="modal">
<div class="modal-content">
<h5>1234</h5>
<p>1243</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527885314GuylianWasHier">
<p><span class="article-title">23</span><br>By GuylianWasHier, 2018-06-01 20:35:14</p>
</a>
</div>
</div>
<div id="art1527885314GuylianWasHier" class="modal">
<div class="modal-content">
<h5>23</h5>
<p>23</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
</div>
<div class="row">
<!-- Form -->
<div class="collection container-collection">
<a class="modal-trigger blog-clicker" href="#createnewarticle">
<p id="title-createnewarticle">Create New Article</p>
</a>
</div>
</div>
The modals get initialized by a script that has the auto-init function from materialize in it (Which loads correctly into the webpage because a modal that has not been generated by php works fine).
Does anyone know how to fix this?.
If you want to have a better look at the code, here is the github repo: https://github.com/GuylianWasHier/Blog.php

Answer 1

You have to reinitialize modals after document.getElementById('container-articles').innerHTML = data;
Try this
function RetrieveArticles() {
fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
document.getElementById('container-articles').innerHTML = data;
// you can destroy previous instances instance.destroy();
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {});
})
}