This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and ...) to text input, password, textarea, drop-down list.
You can easily extend it by adding your own input type using its editableFactory object.

Above code will convert all div tags, which has .editable class, to editable.

Download Editable (jQuery In Place Editor)

Current version is 1.3.3
You can download it here.

jQuery Editable Plugin

1. Formats
2. Options
3. Examples
4. Extending Editable

Formats

• $(selector).editable(options)
  For creating editable object.
• $(selector).editable('disable') _{added in editable 1.3.0}
  For disabling editable object after it's creation.
• $(selector).editable('enable') _{added in editable 1.3.0}
  For enabling a disabled editable object.
• $(selector).editable('destroy') _{added in editable 1.3.0}
  For destroying Editability of an editable object.

Options

• type [string]
  

[default = 'text']
Currently the acceptable values are 'text','password',textarea','select'

• editBy [string] _{added in Editable 1.3.3}

[default = 'click']
You can define jQuery event type : 'blur','dblclick','change','click'

• submitBy [string]

[default = 'blur']
You can define jQuery event type : 'blur','dblclick','change','click'

• submit [string]

Editables are by default submitted on double click. If you want to enable the submit button you must set a value for submit option.
For example set it to 'save'.

• cancel [string]

If you want to enable the cancel button you must set value such as 'discard' or whatever you want.

• editClass [string:cssClass]

You can change the CSS class of your input element to the defined CSS class in your style sheet.

• options [options]

It is used for passing customized data.

For example in using 'select' type you must define the options in key/value format:
{'key1':'value1','key2':'value2','key3':'value3',...}

You can also use it while you are extending it to use your own input tag.

• onEdit [Function]

This function will be called each time you click on the text to convert it to edit status.After the tags converted to input tags this function will be fired.
You can use it to show a message or do some checking and block the inputs.

• onSubmit [Function]

This will be called after user submit the value. Here you can check if value is change so send the new value to server.

• onCancel [Function] _{added in Editable 1.3.3}

This will be called if you assign cancel option. Here you have access to current and previous value of editable object.

• hidden Properties
  

You can access to current value or previous value of the editables any time by using $('editable selector').data('editable.current') or $('editable selector').data('editable.previous'). Be careful while you are using these two hidden properties.
You usually do not need these because you can easily access them in your onSubmit function and onEdit function by using content.current and content.previous.

Examples (Create Editable)

1. This is an editable in simplest way we just add a onEdit function to it
   

   1. $('.editable1').editable({onEdit:begin});

    

   %24%28%27.editable1%27%29.editable%28%7BonEdit%3Abegin%7D%29%3B

   1. function begin(){
   2. this.append('Click somewhere else to submit');
   3. }

    

   function%20begin%28%29%7B%0A%20%20%20%20this.append%28%27Click%20somewhere%20else%20to%20submit%27%29%3B%0A%7D
   
   

   *In these example don't forget to add jQuery ready function to each code. so your code must be like this
   

   1. $(function(){
   2. $('.editable1').editable({onEdit:begin});
   3. function begin(){
   4. this.append('Click somewhere else to submit');
   5. }
   6. });

    

   %24%28function%28%29%7B%0A%24%28%27.editable1%27%29.editable%28%7BonEdit%3Abegin%7D%29%3B%0Afunction%20begin%28%29%7B%0A%20%20%20%20this.append%28%27Click%20somewhere%20else%20to%20submit%27%29%3B%0A%7D%0A%7D%29%3B
   
   
   Click to edit me!
2. Editable will return a jquery object so you can re-use it as you see below.
   

   1. $('.editable2').editable({type:'textarea',submitBy:'dblclick'}).css('background-color','#39c');

    

   %24%28%27.editable2%27%29.editable%28%7Btype%3A%27textarea%27%2CsubmitBy%3A%27dblclick%27%7D%29.css%28%27background-color%27%2C%27%2339c%27%29%3B
   Click to edit me! I will submit by dblclick!!!
3. You can add checking after submiting or compare previous value with new value before calling Ajax function
   

   1. $('.editable3').editable({
   2. type:'password',
   3. submit:'save',
   4. onSubmit:end
   5. });

    

   %24%28%27.editable3%27%29.editable%28%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%27password%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20submit%3A%27save%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSubmit%3Aend%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%29%3B

   1. class="editable3">Enter Password

    

   %3Cp%20class%3D%22editable3%22%3EEnter%20Password%3C%2Fp%3E

   1. function end(content){
   2. alert(content.current+':'+content.previous)
   3. }

    

   function%20end%28content%29%7B%0A%20%20%20%20alert%28content.current%2B%27%3A%27%2Bcontent.previous%29%0A%7D

   Enter Password!

4. When you are using 'select' type you must set the text of div or p or whatever tag you are using to one of the options values otherwise the value will not be selected by default.
   

   1. $('.editable4').editable({
   2. type:'select',
   3. options:{'value1':'Item 1', 2:'Item 2', 'Item 3':'Item 3'},
   4. submit:'save',
   5. cancel:'cancel',
   6. editClass:'resultItem',
   7. onSubmit:end
   8. });

    

   %24%28%27.editable4%27%29.editable%28%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%27select%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%7B%27value1%27%3A%27Item%201%27%2C%202%3A%27Item%202%27%2C%20%27Item%203%27%3A%27Item%203%27%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20submit%3A%27save%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cancel%3A%27cancel%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editClass%3A%27resultItem%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSubmit%3Aend%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%29%3B

   1. class="editable4">Item 2

Extending Editable

You can easily extend jQuery Editable by reading this article.

Tags: JavaScript | jQuery | Plugin