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:
|
1 2 3 4 5 6 7 8 9 |
<div class="company" id="1"> <div id="companyName1" class="editable" editField="name">First Company</div> <div id="companyCity1" class="editable" editField="city">First Company Location</div> </div> <div class="company" id="2"> <div id="companyName2" class="editable" editField="name">Second Company</div> <div id="companyCity2" class="editable" editField="city">Second Company Location</div> </div> |
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[settings.id] = $(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/' + el.id, { fieldName: "editField" });
}
Download the patched version here
Are you sure about line 129? Today I downloaded JEditable v1.7.1 and that line is
129 return;
Please help me.
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 😉
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);