A jQuery plugin for editing text in place.
JavaScript
Latest commit 44ad524 Mar 2, 2012 @doomhz Update README.md

README.md

jQuery Inplace Edit Plugin

How To

  1. Include the doomEdit.css style (optional)
  2. Include the jquery.doomEdit.min.js file
  3. 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 "" 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 "Save" The submit button element that will be clicked to save the data.
cancelBtn "Cancel" 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);}});
});