title: Problem with displaying a modal using PHP script
body: <p>I have a problem with the modal system on my website. Now I will provide you some code:</p>
  <pre><code>MODALS ARE MADE WITH W3.CSS LIB
  </code></pre>
  <p><strong>modal.js (with some debug)</strong></p>
  <pre class="lang-js prettyprint-override"><code>let modal = null;
  let title = null;
  let content = null;
  
  $(document).ready(() =&gt;
  {
      modal = $('#modal');
      title = $('#modal-title');
      content = $('#modal-content');
  
      if(modal == null)
      {
          console.log('aa');
      }
      if(title == null)
      {
          console.log('bb');
      }
      if(content == null)
      {
          console.log('cc');
      }
  });
  
  function showModal(modalTitle, modalText)
  {
      title.text(modalTitle);
      content.text(modalText);
      modal.show();
  }
  
  function hideModal()
  {
      modal.hide();
  }
  </code></pre>
  <p><strong>Modal HTML template</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;modal&quot; class=&quot;w3-modal&quot;&gt;
      &lt;div class=&quot;w3-modal-content&quot;&gt;
          &lt;div style=&quot;display: block;&quot; class=&quot;fir-light-purple&quot;&gt;
              &lt;div class=&quot;w3-container&quot;&gt;
                  &lt;h2 id=&quot;modal-title&quot;&gt;{TITLE}&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class=&quot;w3-container&quot;&gt;
              &lt;span id=&quot;modal-content&quot;&gt;{CONTENT}&lt;/span&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div style=&quot;text-align: center&quot; class=&quot;fir-light-purple&quot;&gt;
              &lt;div class=&quot;w3-container&quot;&gt;
                  &lt;h4&gt;&lt;button class=&quot;w3-button w3-round-medium fir-white&quot; onclick=&quot;hideModal();&quot;&gt;Dismiss&lt;/button&gt;&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>AlertGenerator.php (a script that displays a modal)</strong></p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  //Current modal code
  //&lt;div id=&quot;modal&quot; class=&quot;w3-modal&quot;&gt;&lt;div class=&quot;w3-modal-content&quot;&gt;&lt;div style=&quot;display: block;&quot; class=&quot;fir-light-purple&quot;&gt;&lt;div class=&quot;w3-container&quot;&gt;&lt;h2 id=&quot;modal-title&quot;&gt;{TITLE}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;div class=&quot;w3-container&quot;&gt;&lt;span id=&quot;modal-content&quot;&gt;{CONTENT}&lt;/span&gt;&lt;/div&gt;&lt;br&gt;&lt;div style=&quot;text-align: center&quot; class=&quot;fir-light-purple&quot;&gt;&lt;div class=&quot;w3-container&quot;&gt;&lt;h4&gt;&lt;button class=&quot;w3-button w3-round-medium fir-white&quot; onclick=&quot;hideModal();&quot;&gt;Dismiss&lt;/button&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  /*
  Pretty code:
  
  &lt;div id=&quot;modal&quot; class=&quot;w3-modal&quot;&gt;
      &lt;div class=&quot;w3-modal-content&quot;&gt;
          &lt;div style=&quot;display: block;&quot; class=&quot;fir-light-purple&quot;&gt;
              &lt;div class=&quot;w3-container&quot;&gt;
                  &lt;h2 id=&quot;modal-title&quot;&gt;{TITLE}&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class=&quot;w3-container&quot;&gt;
              &lt;span id=&quot;modal-content&quot;&gt;{CONTENT}&lt;/span&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div style=&quot;text-align: center&quot; class=&quot;fir-light-purple&quot;&gt;
              &lt;div class=&quot;w3-container&quot;&gt;
                  &lt;h4&gt;&lt;button class=&quot;w3-button w3-round-medium fir-white&quot; onclick=&quot;hideModal();&quot;&gt;Dismiss&lt;/button&gt;&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
   */
  
  class AlertGenerator
  {
      public static function createAlert(string $title, string $content)
      {
          self::validateSession();
          $_SESSION['alert']['title'] = $title;
          $_SESSION['alert']['content'] = $content;
      }
  
      public static function displayModal()
      {
          echo '&lt;div id=&quot;modal&quot; class=&quot;w3-modal&quot;&gt;&lt;div class=&quot;w3-modal-content&quot;&gt;&lt;div style=&quot;display: block;&quot; class=&quot;fir-light-purple&quot;&gt;&lt;div class=&quot;w3-container&quot;&gt;&lt;h2 id=&quot;modal-title&quot;&gt;{TITLE}&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;div class=&quot;w3-container&quot;&gt;&lt;span id=&quot;modal-content&quot;&gt;{CONTENT}&lt;/span&gt;&lt;/div&gt;&lt;br&gt;&lt;div style=&quot;text-align: center&quot; class=&quot;fir-light-purple&quot;&gt;&lt;div class=&quot;w3-container&quot;&gt;&lt;h4&gt;&lt;button class=&quot;w3-button w3-round-medium fir-white&quot; onclick=&quot;hideModal();&quot;&gt;Dismiss&lt;/button&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;' . PHP_EOL;
      }
  
      public static function showAlert()
      {
          self::validateSession();
          if(array_key_exists('alert', $_SESSION))
          {
              if(!array_key_exists('title', $_SESSION['alert']) || !array_key_exists('content', $_SESSION['alert'])) return;
  
              $title = addslashes($_SESSION['alert']['title']);
              $content = addslashes($_SESSION['alert']['content']);
  
              if(empty($title) || empty($content)) return;
  
              echo '&lt;script&gt;showModal(&quot;' . $title . '&quot;, &quot;' . $content . '&quot;);&lt;/script&gt;';
          }
      }
  
      private static function validateSession()
      {
          session_start();
      }
  }
  </code></pre>
  <p><strong>Example usage:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;?php HeadGenerator::generate('Login', true); ?&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
      &lt;script src=&quot;https://www.google.com/recaptcha/api.js&quot; async defer&gt;&lt;/script&gt;
      &lt;script src=&quot;/includes/js/loginForm.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;?php AlertGenerator::displayModal(); AlertGenerator::showAlert(); NavBarGenerator::defaultNav(); ?&gt;
  
  &lt;div class=&quot;w3-container&quot;&gt;
      [... website content ...]
  &lt;/div&gt;
  
  &lt;script&gt;showModal('test', 'test of modal');&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Example usage creates modal only using  at the bottom.</p>
  <p>This is an error I receive: <code>Uncaught TypeError: can't access property &quot;text&quot;, title is null</code></p>
  <p>My debug functions in the .js file don't send any output.</p>
  <p><strong>My expectations</strong></p>
  <p>I'd like to make the modal visible right after the showModal(x, y) function.</p>
  <p><strong>Additional notes:</strong></p>
  <p>When modal code is created by a PHP script, the console error mentioned above appears. When I include the modal code manually (commented modal template in the Example usage), a console error doesn't appear.</p>
  <p>Does anyone know how can I resolve this issue?</p>
  <p><strong>EDIT ALPHA</strong></p>
  <p>I forgot that I used functions to create &lt; head &gt;. You can be sure that all the required scripts are included.</p>