实现模态不起作用

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, {});
 })
}