使用模态更新文本区域时 Jquery .html() 函数出现问题

Question

我正在尝试创建一个允许用户在相应数据库上编辑备注字段的模式。

问题是，它在我提交一些表单数据之前一直有效，之后 textarea 不会用新数据更新，它只是显示提交的数据。

需要记住的一些事情： 备注字段以纯文本形式存储在后端数据库中。 “AjaxGetData.wc”（参见下面的代码）以 HTML 格式返回字段内容。 我正在使用一个名为 jquery.form.js 的 javascript 类在模式中提交表单数据。

所以，我有一个包含表单的模式，并且该表单上有一个 textarea，此 textarea 的名称会根据在数据表中单击的元素而动态更改。

然后，当单击 href 以打开模式时，将运行 ajax 请求，该请求会收集请求元素的数据（带有 HTML 格式）并使用 $('#myTextArea').html(string )。

这一切都有效，但是在提交一些更改的文本后，所有后续模式请求都会加载第一个提交的字符串，无论我在数据表中单击哪一行。尽管在 console.log 中它显示了 ajax 帖子返回的正确字符串。

理想情况下，我想了解为什么 .html() 函数在我提交一些数据后停止工作。

请看我下面的代码：

\\HTML
<!-- START -->
<div class="modal fade" id="editLogoPnotModal" tabindex="-1" role="dialog" aria-labelledby="editLogoPnotLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
    <form id="editLogoPnot-Form" action="AjaxTableFieldUpdate.wc" method="post">
      <!--Header-->
      <div class="modal-header alert-primary">
        <h4 class="modal-title" id="myModalLabel">Artwork Production Notes</h4>
        <button type="button" id="editLogoPnot-closebtn" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body">
        <div class="md-form">
          <i class="fas fa-pencil-alt prefix"></i>
          <textarea id="editLogoPnot" name="ThisChangesDynamically" class="md-textarea form-control" rows="10" style="white-space: pre-wrap; overflow-y: scroll;"></textarea>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </form>
    </div>
  </div>
</div>
<!-- END -->

\\SCRIPTS
  $('#dtSjob').on('click', 'a.editLogoPnot', function (e) {
    e.preventDefault();

   // Get the data of the selected row from the data table
    epData = sjobTable.row( $(this).closest('tr')).data()

   // Change the name attr of the textarea to identify the requested data
    console.log($("#editLogoPnot").attr('name'))
    $("#editLogoPnot").attr('name', 'logosxzxurnxzx'+epData['sjob']['logourn']+'xzxpnotxzxM');
    console.log($("#editLogoPnot").attr('name'))

   // Get the latest notes for LogoURN
    $.ajax({ url: "AjaxGetData.wc?ti=Logos;urn&fl=pnot&key=urn:C:"+epData['sjob']['logourn'],
       type: "POST",
       success: function(data) {
             // The below line ALWAYS displays the correct data
             console.log("Returned data: "+data);

             // The below line only works before I submitted some changed data, then it stops working.
             $("#editLogoPnot").html(data);
       }
    });
  });

\\ The below function handles the submit of the modal form
  var editLogoPnotoptions = {
      success:       editLogoPnot_showResponse
  };

  $('#editLogoPnot-Form').submit(function() {
      $(this).ajaxSubmit(editLogoPnotoptions);
      // !!! Important !!!
      // always return false to prevent standard browser submit and page navigation
      return false;
  });

  function editLogoPnot_showResponse(responseText, statusText, xhr, $form)  {
    $('#editLogoPnotModal').modal('hide');
  }

我尝试使用 .val() 来解决问题，但是我无法让数据在 textarea 中正确显示（它包括所有 HTML 格式）。如果有人对如何解决这个问题有任何建议，那也可以解决我的问题。

任何建议都将不胜感激，因为我已经用尽了所有想法！

谢谢，克里斯

Answer 1

如果我正确理解了这个问题，您可以将响应字符串作为 html 放入临时元素中，并将其作为文本从该元素中检索到文本区域中。

const str ='**E5654 ** Add Flat Neck Label

Test123';

const $div = $('<div>').html(str)

$('textarea').val($div.text())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea cols="60" rows="10"></textarea>