Awesome

jQuery Inplace Edit Plugin

How To

Include the doomEdit.css style (optional)
Include the jquery.doomEdit.min.js file
Activate the plug-in: $('.dedit').doomEdit();

Options

Name	Default value	Description
editForm.method	"post"	GET or POST request method for remotely sent data.
editForm.action	"/"	The remote URL where the data will be sent.
editForm.id	"doomEditForm"	The id of the form.
ajaxSubmit	true	Specifyes if the data should be sent remotely.
editField	"<input name="{editFieldName}" type="text" />"	The hidden edit field that will appear when edit starts. You can specify your own textarea or input field.
editFieldName	"doomEditElement"	The field name that will be sent along with the request. First it tries to get it automaticaly from the "data-field-name" attribute of the element then from the config option.
submitBtn	"<button type="submit" class="save-btn">Save</button>"	The submit button element that will be clicked to save the data.
cancelBtn	"<button type="button" class="cancel-btn">Cancel</button>"	The cancel button element that will be clicked to cancel the data.
autoDisableBt	true	The submit button is auto-disabled by default if the content of the edited field is the same as the old one so the user can't submit the form if he didn't change anything. Change this to false so the user can always submit the form.
extraHtml	''	Add extra HTML element to the form (i.e hidden inputs).
htmlFilter	false	A filter callback that will be fired when the original HTML shows up for editing.
placeholder	true	Give a 'data-placeholder="some placeholder"' attribute to your editable element to display a placeholder when your element has no text.
showOnEvent	"click"	Show the edit form on this event. If set to false - don't bind it to any event.
autoTrigger	false	If set to true - shows the edit form immediately. Usually you set the showOnEvent to false and autoTrigger to true to trigger the event immediately without binding it.
submitOnBlur	false	If set to true - submits the new data when the edit element looses it's focus.
beforeFormSubmit	function (data, form, el) {$('button', form).attr('disabled', 'disabled').fadeTo(0, 0.2);}	A callback function that will be triggered before the data is saved.
afterFormSubmit	function (data, form, el) {$('button', form).removeAttr('disabled').fadeTo(0, 1);}	A callback function that will be triggered after the data is saved.
onFormError	function (xhr) {console.log(xhr.responseText);}	A callback function that will be triggered on save form error.
onCancel	null	A callback function that will be triggered when the cancel button is pressed.
onStartEdit	null	A callback function that will be triggered when the edit field is activated.

Implementation

Very simple example

$(document).ready(function () {
	$('.dedit-simple').doomEdit({ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});

Simple example with textarea

$(document).ready(function () {
	$('.dedit-simple').doomEdit({ajaxSubmit:false, editField: '<textarea name="myEditTextarea" rows="10" cols="70"></textarea>', afterFormSubmit: function (data, form, el) {el.text(data);}});
});

Simple example with select box

$(document).ready(function () {
	$('.dedit-simple').doomEdit({ajaxSubmit:false, editField: '<select name="myEditSelect"><option value="male">male</option><option value="female">female</option></select>', afterFormSubmit: function (data, form, el) {el.text(data);}});
});

Simple example with a placeholder

Give a 'data-placeholder="some placeholder"' attribute to your editable element to display a placeholder when your element has no text.

$(document).ready(function () {
	$('.dedit-simple').doomEdit({placeholder: true, ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});

Simple example with saving data on side click

Set 'submitOnBlur: true' option to true if you want to save the new data on outside click (when the edit element looses it's focus).

$(document).ready(function () {
	$('.dedit-simple').doomEdit({submitOnBlur: true, ajaxSubmit:false, submitBtn: false, cancelBtn: false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});

Remote submit with ajax example

$(document).ready(function () {
	$('.dedit-remote').doomEdit({editForm:{method:'post', action:'remote.html', id:'myeditformid'}, afterFormSubmit: function (data, form, el) {el.text($('input', form).val());alert(data);}});
});

Remote submit with ajax example and JSON response

$(document).ready(function () {
	$('.dedit-remote-json').doomEdit({editForm:{method:'post', action:'remote_json.html', id:'myeditformid'}, afterFormSubmit: function (data, form, el) {data = $.parseJSON(data);el.text(data.message);alert(data.message);}});
});

Multiple cells table edit example

$(document).ready(function () {
	//Edit multiple cells inline
	$('.edit-cell-inline').doomEdit({ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});