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:

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:

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:

  1. { success:[boolean], type:[string], id:[integer], value:[string] }

afterRemove, callback

Parameters:

  1. { success:[boolean], id:[integer] }

getId, callback

Parameters:

  1. jQuery object of field

filterElementValue, callback

Parameters:

  1. jQuery object of field

animate, boolean

Default true

colors, object

Default { success:'green', error:'red' }


		
	

PHP

Javascript