Question

我已经在主页中创建了一个模态，并且我使用jQuery从文本文件中获取数据，我能够从文本文件中成功获取数据并能够控制台注销该文本文件，但是当我打开模态时，该字段为空白。我可以知道为什么吗??

这是从文本文件中获取数据的代码：

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

这是控制台日志文件，我可以获取数据

这是引导程序模式代码：

        <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标记的id为outputText，但是当我打开模态时，它像这样空白

有人知道我在哪里犯了错误吗？为什么我的模态是空白的？不应该这样

提前谢谢！谢谢。

Answer 1

您正在使用$（selector）.val（）函数设置val属性，而不必为此设置段落标记的内部html，以便在DOM上显示数据。

希望它会有所帮助。

Answer 2

JQuery的.val()函数用于检索一个节点值，而不用于设置。您想要的是使用JQuery的.text()函数，该函数可用于在节点上设置文本。

将您的$('#outputText').val(data);替换为以下内容：

$('#outputText').text(data)

Answer 3

        $(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);    
          });

}

将文本文件中的文本显示为boostrap模式

3 个答案: