README

jQuery Inplace Edit Demo


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

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).
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

<script type="text/javascript">
	$(document).ready(function () {
		$('.dedit-simple').doomEdit({ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
	});
</script>
		

Simple example with textarea

<script type="text/javascript">
	$(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);}});
	});
</script>

Simple example with select box

<script type="text/javascript">
    $(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);}});
	});
</script>


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.

<script type="text/javascript">
    $(document).ready(function () {
		$('.dedit-simple').doomEdit({placeholder: true, ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
	});
</script>


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).

<script type="text/javascript">
    $(document).ready(function () {
		$('.dedit-simple').doomEdit({submitOnBlur: true, ajaxSubmit:false, submitBtn: false, cancelBtn: false, afterFormSubmit: function (data, form, el) {el.text(data);}});
	});
</script>


Remote submit with ajax example

<script type="text/javascript">
	$(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);}});
	});
</script>
		

Remote submit with ajax example and JSON response

<script type="text/javascript">
	$(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);}});
	});
</script>
		
Multiple cells table edit example

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