Ajax-enabled In-place Editor For jQuery - doomEdit

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.