Отображение текста из текстового файла в модальности boostrap - PullRequest
Новая
       4

Отображение текста из текстового файла в модальности boostrap

0 голосов
/ 21 мая 2019

Я создал модал на своей главной странице, и я использую jQuery для получения данных из текстового файла, я могу успешно получить данные из текстового файла и получить консольный выход из текстового файла, но когда я открывал свой модал, поле было пустым. Могу ли я узнать причину, почему ??

Вот код для получения данных из текстового файла: 

$(document).ready(function()
{
  jQuery.get('{% static 'css/legalNotice.txt' %}',function readFile(data)
  {
    $('#outputText').val(data);
    console.log(data);
  });
});

Вот файл журнала консоли, я могу получить данные enter image description here

Вот модальный код начальной загрузки: 

        <div class="modal fade" id="legalNotice" tabindex="-1" role="dialog" aria-labelledby="legalNoticeLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title col-md-11" id="legalNoticeLabel">TCA License</h5>
            <button type="button" class="close col-md-1" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body" style="padding: 50px">
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">
                <p id="outputText"></p>
              </label>
            </div>
          </div>
          <div class="modal-footer">
            <button id="cancelButton" type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>

Я использую тег p для вывода текста, который я получаю из функции, идентификатор тега p равен outputText, но когда я открываю свой модал, он был пустым, как этот

enter image description here

Кто-нибудь знает, где я допустил ошибку? Почему мой модал пуст? Так не должно быть.

Спасибо заранее !! Спасибо ..

Ответы [ 3 ]

1 голос
/ 21 мая 2019

Функция JQuery .val() предназначена для извлечения значения узлов, а не для установки этого.Вам нужно использовать функцию JQuery; s .text(), которая может использоваться для установки текста на узле.

Замените $('#outputText').val(data); на следующее: 

$('#outputText').text(data)
1 голос
/ 21 мая 2019

Вы устанавливаете атрибут val с помощью функции $ (селектор) .val (), вместо этого вам нужно установить внутренний html тега абзаца для отображения данных в DOM.

надеюсь, что это поможет.

0 голосов
/ 21 мая 2019 
        $(document).ready(function()
        {
        $('#legalNotice').on('shown.bs.modal', function () {
             fetchFile();
          });
      });

function fetchFile(){
         jQuery.get('{% static 'css/legalNotice.txt' %}',function readFile(data)
          {
            $('#outputText').text("").text(data);
            //or
           $('#outputText').html("").html(data);    
          });

}
...