Ajax-enabled In-place Editor For jQuery - doomEdit
File Size: | 10.7 KB |
---|---|
Views Total: | 3562 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery inline editing plugin which allows to edit and update content of an HTML element (text, table cell, editable container, etc) in its place. Click on the html element to start editing and the changed data will be saved/submitted to the server via AJAX requests (OPTIONAL).
How to use it:
1. Insert JQuery library and the jQuery doomEdit plugin's main JavaScript file into the html file.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.doomEdit.js"></script>
2. Call the function doomEdit
on the target element which will be editable on click:
$('.element').doomEdit();
3. Customize the edit field as this:
$('.element').doomEdit({ editField: '<textarea name="myEditTextarea"></textarea>' });
4. Submit the date to the server via AJAX requests:
$('.element').doomEdit({ editForm:{ method:'post', action:'remote.html', id:'myeditformid' }, afterFormSubmit: function (data, form, el) { el.text($('input', form).val());alert(data); } });
5. Remote submit with ajax example and JSON response:
$('.element').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); } });
6. All default plugin settings:
$('.element').doomEdit({ // edit form options editForm: { method:'post', action:'/', id:'doomEditForm' }, // enable ajax submit ajaxSubmit: true, // custom edit field editField: '<input name="{editFieldName}" type="text" />', // name of edit field editFieldName: 'doomEditElement', // custom submit button submitBtn: '<button type="submit" class="save-btn">Save</button>', // custom cancel button cancelBtn: '<button type="button" class="cancel-btn">Cancel</button>', // auto disable button autoDisableBt: true, // enable placeholder placeholder: true, // additonal html markup extraHtml: '', // fired when the original HTML shows up for editing htmlFilter: false, // custom trigger event showOnEvent: 'click', // whether to show the edit field immediately autoTrigger: false, // submit on blur submitOnBlur: false });
7. Event handling:
$('.element').doomEdit({ afterFormSubmit: function (data, form, el) { $('button', form).removeAttr('disabled').fadeTo(0, 1); }, beforeFormSubmit: function (data, form, el) { $('button', form).attr('disabled', true).fadeTo(0, 0.2); }, onFormError: function (xhr) { console.log(xhr.responseText); }, onCancel: null, onStartEdit: null });
This awesome jQuery plugin is developed by doomhz. For more Advanced Usages, please check the demo page or visit the official website.