title: Inline Editing of Textarea with jquery.inline-edit.js – Get the id and save
body: <p>I am looking for a simple way to implement inline editing in a table (with Django). I did not test stuff like <a href="https://pypi.org/project/django-front/" rel="nofollow noreferrer">Django-Front</a> or <a href="https://pypi.org/project/django-inlineedit/" rel="nofollow noreferrer">django-inlineedit</a> so far. I already found out, that not all simple solutions work for me. <a href="https://github.com/faulker/jqInlineEdit" rel="nofollow noreferrer">jqInlineEdit</a> and inline-edit.jquery.js do work only with <em>unique</em> selectors, <a href="https://stackoverflow.com/questions/62245361/inline-editing-of-textarea-how-to-get-the-id#comment110091151_62245589">as I described here</a>.</p>
  
  <p>With <a href="http://shokai.github.io/jQuery.editable/" rel="nofollow noreferrer">jQuery.editable</a> (jquery.inline-edit.js), I do not have these problems, but I do not know how to get the id and save the data.</p>
  
  <pre><code>&lt;div id="remark4" class="editable" data-cid="4"&gt;Test #4&lt;/div&gt;
  &lt;div id="remark5" class="editable" data-cid="5"&gt;Test #5&lt;/div&gt;
  &lt;div id="remark6" class="editable" data-cid="6"&gt;Test #6&lt;/div&gt;
  
  &lt;script src="file:jquery.inline-edit.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $('.remark').inlineEdit('click', {
  
          // use textarea instead of input field
          type: 'textarea',
          // attributes for input field or textarea
          attributes: {
              id: $(this).attr("data-cid"),
              class: 'input-class-1 input-class-2 input-class-3',
              style: 'background:#ffe;'
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Is the <code>$(this).attr("data-cid")</code> part correct?  How can I run a let's say <code>alert(c_id + content)</code> after the content in the form has changed? I did not found a documentation or an example for that and trial and error was not successful so far.</p>
  
  <p><strong>Followup:</strong></p>
  
  <p>The docu does give <a href="http://shokai.github.io/jQuery.editable/" rel="nofollow noreferrer">examples</a>. Incredible that I did not see this earlier, sorry for that.</p>
  
  <p>I tried the following code instead of the one above:</p>
  
  <pre><code>    var option = { trigger: $(".editable"), action: "click" };
      $(".editable").editable(option, function (e) {
          alert(e.value);
      });
  </code></pre>
  
  <p>This is the error message: <code>TypeError: $(...).editable is not a function</code></p>
  
  <p>What's still wrong?</p>