title: Displaying text from text file into boostrap modal
body: <p>I've created a modal inside my main page, and I use jQuery to get the data from the text file, I am able to successfully get the data from the text file and able to console log out the text file, but when I open my modal, the field was blank. May I know the reason why ??</p>
  
  <p>Here is the code for getting the data from text file :</p>
  
  <pre><code>$(document).ready(function()
  {
    jQuery.get('{% static 'css/legalNotice.txt' %}',function readFile(data)
    {
      $('#outputText').val(data);
      console.log(data);
    });
  });
  </code></pre>
  
  <p>Here is the console log file, I can get the data
  <a href="https://i.stack.imgur.com/qsq8y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qsq8y.png" alt="enter image description here"></a></p>
  
  <p>Here is the bootstrap modal code : </p>
  
  <pre><code>        &lt;div class="modal fade" id="legalNotice" tabindex="-1" role="dialog" aria-labelledby="legalNoticeLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title col-md-11" id="legalNoticeLabel"&gt;TCA License&lt;/h5&gt;
              &lt;button type="button" class="close col-md-1" data-dismiss="modal" aria-label="Close"&gt;
                &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body" style="padding: 50px"&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="recipient-name" class="col-form-label"&gt;
                  &lt;p id="outputText"&gt;&lt;/p&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button id="cancelButton" type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Ok&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I use a p tag to output the text that I get from the function , the id of the p tag is outputText, but when I open my modal, it was blank like this</p>
  
  <p><a href="https://i.stack.imgur.com/zlCrk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zlCrk.png" alt="enter image description here"></a></p>
  
  <p>Does anyone know where did I made a mistake ?? Why my modal is blank ? It shouldn't be. </p>
  
  <p>Thanks in advance !! Thanks..</p>