JEditable – custom field name

I love JEditable, it’s an extremely useful way of having editable content on a page. I did come up against a limitation though. The name of the field is determined by the ID attribute of the containing DIV (or other element). Consider the following where you want fields to be editable for two different companies on the same page:

In order to make this work in JEditable you need to patch it and add an option to specify which attribute is used to determine the name of the field:

In version 1.7.1 modify line 326 as follows:

submitdata[] = $(self).attr(settings.fieldName);

and add below line 129 to set the default to “id” (as per normal JEditable behaviour):

fieldName : 'id',

That’s it! You can now do something like this to make each field editable:

$('.company .editable').each(function(n. el) {
$(el).editable('/company/save/' +, { fieldName: "editField" });

Download the patched version here

3 thoughts on “JEditable – custom field name

  1. Rob Val

    Are you sure about line 129? Today I downloaded JEditable v1.7.1 and that line is
    129 return;
    Please help me.

    • David

      Hi Rob, I’ve added a link to a patched version at the bottom of the article. Let me know how you get on with it 😉

  2. Hi Andrejus,Thanks for the post. But in one of the comments the code you pviorded for adding at the end of the row iter.insertRowAtRangeIndex(iter.getRangeSize() – 1, newRow)This will throw error for out of range, so rather it should insert at the index after last rowiter.insertRowAtRangeIndex(iter.getRangeIndexOf(lastRow) +1, newRow);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">