title: Issue with Jquery .html() function when updating a textarea with a modal
body: <p>I'm trying to create a modal that allows a user to edit a memo field on a corresponding database.</p>
  <p>The issue is, it works until I submit some form data, after that the textarea is not updating with the new data, it just displays the submitted data.</p>
  <p>Some things to bear in mind:
  The memo field is stored as plain text within the backend database.
  The 'AjaxGetData.wc' (see code below) returns the field content in HTML format.
  I'm using a javascript class called jquery.form.js to submit the form data within the modal.</p>
  <p>So, I have a modal that contains a form and on that form is a textarea, the name of this textarea is changed dynamically depending on what element was clicked within a data table.</p>
  <p>Then, when the href is clicked to open the modal an ajax request is run which collects the data (with HTML formatting) for the requested element and inserts it into the textarea using $('#myTextArea').html(string).</p>
  <p>This all works, but after submitting some changed text all subsequent modal requests load the first submitted string no matter which row I click within the data table. Although in the console.log it is showing the correct string being returned by the ajax post.</p>
  <p>Ideally, I like to understand why the .html() function stops working after I have submitted some data.</p>
  <p>Please see my code below :</p>
  <pre><code>\\HTML
  &lt;!-- START --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;editLogoPnotModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;editLogoPnotLabel&quot;
    aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg modal-dialog-centered&quot; role=&quot;document&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
      &lt;form id=&quot;editLogoPnot-Form&quot; action=&quot;AjaxTableFieldUpdate.wc&quot; method=&quot;post&quot;&gt;
        &lt;!--Header--&gt;
        &lt;div class=&quot;modal-header alert-primary&quot;&gt;
          &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Artwork Production Notes&lt;/h4&gt;
          &lt;button type=&quot;button&quot; id=&quot;editLogoPnot-closebtn&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
            &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;!--Body--&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
          &lt;div class=&quot;md-form&quot;&gt;
            &lt;i class=&quot;fas fa-pencil-alt prefix&quot;&gt;&lt;/i&gt;
            &lt;textarea id=&quot;editLogoPnot&quot; name=&quot;ThisChangesDynamically&quot; class=&quot;md-textarea form-control&quot; rows=&quot;10&quot; style=&quot;white-space: pre-wrap; overflow-y: scroll;&quot;&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--Footer--&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- END --&gt;
  
  \\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($(&quot;#editLogoPnot&quot;).attr('name'))
      $(&quot;#editLogoPnot&quot;).attr('name', 'logosxzxurnxzx'+epData['sjob']['logourn']+'xzxpnotxzxM');
      console.log($(&quot;#editLogoPnot&quot;).attr('name'))
  
     // Get the latest notes for LogoURN
      $.ajax({ url: &quot;AjaxGetData.wc?ti=Logos;urn&amp;fl=pnot&amp;key=urn:C:&quot;+epData['sjob']['logourn'],
         type: &quot;POST&quot;,
         success: function(data) {
               // The below line ALWAYS displays the correct data
               console.log(&quot;Returned data: &quot;+data);
  
               // The below line only works before I submitted some changed data, then it stops working.
               $(&quot;#editLogoPnot&quot;).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');
    }
  
  </code></pre>
  <p>I have tried using .val() which solves the issue but, I cannot get the data to display correctly within the textarea (it includes all the HTML formatting). If anyone has any suggestions on how to fix this, then that would also solve my issue.</p>
  <p>Any suggestions would be greatly appreciated, as I have exhausted all my ideas!</p>
  <p>Thanks, Chris</p>