jQuery Inline Edit Easiest ajax edit and remove implementation
Edit functionality in web apps is never fun to do; it's a routine job. This is why this jQuery plugin was created. With just one line of Javascript code you have added edit (and maybe remove) functions to your list/table of data!
Inline Edit supports both single line and multiple line inputs. There are also many options like callbacks on different events.
Demo
Click to edit! The code for this example is right below it. This demo doesn't save if you edit. Some things you might notice:
- The field you click on get's focus when the input field pops up
- The price field get's $ stripped, and then re-inserted
- When you click save, the field goes green or red depending on success.
| Category | Price |
|---|---|
| Apples | $12.50 |
| Pears | $2.50 |
| Oranges | $34.00 |
| Crazy fruits | $1.99 |
$.inlineEdit({
categoryName: 'ajax.php?type=name&categoryId=',
categoryPrice: 'ajax.php?type=price&categoryId=',
remove: 'ajax.php?remove&type=price&categoryId='
}, {
animate: false,
filterElementValue: function($o){
if ($o.hasClass('categoryPrice')) {
return $o.html().match(/\$(.+)/)[1];
} else {
return $o.html();
}
},
afterSave: function(o){
if (o.type == 'categoryPrice') {
$('.categoryPrice.id' + o.id).prepend('$');
}
}
});
Documentation
To apply Inline Edit, call the function $.inlineEdit. This function takes two parameters, the second is optional.
$.inlineEdit (urls, [options])
HTML
Inline Edit is applied to individual HTML elements. These elements should have a couple of html classes:
- editableSingle or editableMulti depending if you want single line or multi line input
- id# (replace # with the actual id)
- An identifier for that value type (could be "categoryName" or "videoTitle")
- If the item should be removable, add class removable
A coulple of examples, both UL and TABLE.
<table> <tr> <td class="editableSingle categoryName removable id1">Apples</td> <td class="editableSingle categoryPrice removable id1">$12.50</td> </tr> <tr> <td class="editableSingle categoryName removable id2">Pears</td> <td class="editableSingle categoryPrice removable id2">$2.50</td> </tr> </table>
<ul> <li class="editableSingle categoryName removable id1">Category name 1</li> <li class="editableSingle categoryName removable id2">Category name 2</li> <li class="editableSingle categoryName removable id3">Category name 3</li> <li class="editableSingle categoryName removable id4">Category name 4</li> </ul>
Parameter urls
This is were the value type identifier is connected to an ajax postable URL. The ID is appended after this URL. If removable is used, remove parameter must be specified. Example:
{
categoryName: 'ajax.php?type=name&categoryId=',
categoryPrice: 'ajax.php?type=price&categoryId=',
remove: 'ajax.php?remove&type=price&categoryId='
}
Optional parameter options
afterSave, callback
Parameters:
- { success:[boolean], type:[string], id:[integer], value:[string] }
afterRemove, callback
Parameters:
- { success:[boolean], id:[integer] }
getId, callback
Parameters:
- jQuery object of field
filterElementValue, callback
Parameters:
- jQuery object of field
animate, boolean
Default true
colors, object
Default { success:'green', error:'red' }