jQuery Plugin For Inline Editing Of Data On The Webpage - InlineEdit.js

Yet another inline editing jQuery plugin that makes any elements editable with an input field on double click. The new data will be sent to the server via AJAX post request.

How to use it:

1. Add jQuery library and the InlineEdit plugin's files into your html page.

<link rel="stylesheet" href="inlineedit.css">
<script src="jquery.min.js"></script>
<script src="inlineedit.js"></script>

2. Add the CSS class 'data' to your element which will be made editable and config the InlineEdit function using the HTML5 data-attributes as displayed below:

• div.data elements are the elements which will be made editable.
• The data-identifier attribute on the element is compulsory and contains a unique identifier to be sent to the server (along with the data) on edit
• data-regex is an optional attribute, it takes a valid JS regex string and will be used to validate any changes
• data-regex-comment is an optional attribute, which is only used when paired with data-regex. This comment will be shown to the user when RegEx validation fails.

<div class="data" 
     data-identifier="18" 
     data-regex="^([a-z])+$" 
     data-regex-comment="Lower case characters only">
     Double Click Me
</div>

3. Initialize the plugin with default options.

$('div.data').inlineEdit();

4. All possible options to customize the plugin.

$('div.data').inlineEdit({

  // Passed to jQuery ajax directly, so absolute/relative handled accordingly
  url: '', 

  // Contains the keycode values to cancel/save an edit
  keycodes: { 
    cancel: [27], //27 = Esc
    save: [13] //13 = Enter
  },

  // input type
  input_type: 'text',

  // When click outside of an editable element
  outer_click: { 
    enabled: true,
    action: false //False to cancel, true to save
  }
  
});

5. The plugin will sent the new data to your server with the following values:

• type: Used to identify the data as being from InlineEdit. 
• id: The unique identifier for the element.
• old_data: The previous value of the element
• new_data: The new value of the element

if($_POST["type"] == "InlineEdit"){
  $data = $_POST["new_data"];
  ...
  doSomething();
}

---

This awesome jQuery plugin is developed by MrJoelKelly. For more Advanced Usages, please check the demo page or visit the official website.