CODEWITHSUNDEEP
javascriptjquery
Ralf Zosel
Ralf Zosel

Reputation: 693

Inline Editing of Textarea – How to get the id?

I use jqInlineEdit for inline editing on a web page. Everything works, except I don't know how to get the id of the item which I need for saving the change to the database(via Django).

The HTML looks like this:

<div id="remark14756" class="remark" data-cid="14756">
    Sample Text
</div>

That's the JavaScript:

<script src="/static/inline-edit.jquery.js"></script>
<script>

    $(".remark").inlineEdit({
        type: 'textarea',

        onChange: function (e, text, html) {
            // Executes when exiting inline edit mode and a change has been made
            c_id = $(this).attr("data-cid");
            alert("Test: ", c_id)
        }
    });
</script>

Obviously, $(this) does not work in this context. I tried everything and searched a lot but I can't find how to do it the right way. Does anybody know the answer?

Upvotes: 1

Views: 551

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

The inlineEdit docs say:

onChange(this, text, html) - Executes when exiting inline edit mode and a change has been made

with the use of this being quite misleading.

therefore the first param is actually the Element. 

$(".remark").inlineEdit({
    type: 'textarea',

    onChange: function (elem, text, html) {

       // `this` refers to inlineEdit instance plugin
       // `elem` is the currently edited element

       const c_id = $(elem).attr("data-cid");
       alert(c_id);  // 14756
    }
});

That plugin is not performing in an expected "jQuery Plugin" way.
Usually properly written plugins should:

  • bind all methods to the Element callee,
  • (in case of Event methods) the first parameter should always refer to the original Event.

allowing a developer to reference it using the this keyword to get the native JS Element or either doing $(this) inside the exposed public Methods just like we're expected from native jQuery Methods, and to have accessible the Event (i.e: useful in case we use arrow functions to extract the currentTarget since the inexistence of this keyword)

$someElem.on('click', function(evt) {
  const $el = $(this); // what we're used to
});

$someElem.on('click', (evt) => {
  const $el = $(evt.currentTarget); // the importance of always passing the Event as first param
});

clearly not implemented in that plugin.

Upvotes: 1

Related Questions