jQuery doomEdit Plugin Examples

Very simple example

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

Result:

Please click me to edit!

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>
		

Result:

Try to edit the text above:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus egestas. Sed id massa velit, interdum consequat est. Cras malesuada nisi eu ligula mollis posuere quis eget risus. Ut sed lacus ante. Cras et arcu id quam pellentesque interdum. Etiam nec lectus sed velit volutpat feugiat. Sed mattis, enim vel dictum porta, purus arcu cursus lorem, non euismod elit ipsum nec leo.

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>
		

Result:

Try to edit the text above:

I am a male.

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>
		

Result:

Please to edit!

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>
		

Result:

Please edit me and click outside to save the new data!

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>
		

Result:

Please click me to edit and save the content remotely!

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>
		

Result:

Please click me to edit and save the content remotely! A JSON response will be parsed.

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>
		

Result:

Col 1	Col 2
1111	2222
3333	4444
5555	6666
7777	8888