Please wait...

We are thrilled to have you onboard at Tectual. Doesn't matter if you ask for our free advice or a billion dollar project. We adore you, respect you and spend time to understand you. You are special.

Your query is submitted with us and we'll contact you back in no time.

Close

Your comment is not submitted. Please make sure both "Name" and "Comment" are filled.

Thank you for posting a comment. It will help us and other members a lot. If you submitted a question, we will respond to it ASAP. Keep in touch.

Close
Contact Us
< Back to the Blog

jQuery Editable Plugin (Best In Place Editor)

jQuery Editable (Inline Editor) War

Like all other things on the web there is kind of war between geek working on same topic. Specially when they release a plugin or piece of code and it is similar to others. Once we did a famous plugin called jQuery Editable at 2009. Today we are releasing the best editable plugin we came up with. It is flexible, light and Extendable. Check these samples:

And, Click me!
Don't forget me!

How jQuery Editable Works

jQuery Editable consist of 3 elements:

  • Parent Element
  • Display Element
  • Input Field/Element

The structure is like this:

<span>
  <label></label>
  <input />
</span>

In this case span is Parent Element, label is Display Element and input is Input Element.

* Span and label and input can be changed to any tag you want "that's why it is so flexible".
* Parent element is not mandatory it is needed in case you want the Input Element to be displayed in same position as Display Element.

Display Element has two extra attributes called data-type="editable" and data-for="css selector for Input Element".

The above code can be something like this:

<span>
  <label data-type="editable" data-for=".input1">Click me to change!</label>
  <input class='input1'/>
</span>

And when you call $('body').editables(); it will detect all editables in defined scope "body" and make them to act as editable. See more add sample page at the end of page.

$('body').editables( { editOn: 'mouseover' } );


jQuery Editable Options

This plugin get 6 options:

  • editOn: [event | array[events] ] Any valid jQuery Event: click, dblclick, mouseover, ... Default is 'click'.
  • beforeEdit: [function(inputField, ev){} ] This function is called before converting the display to input field. "this" keywords in this fucntion refers to display element.
  • onEdit: [function] This function is bound to display element as an event.
  • freezeOn: [event | array[events] ] Any valid jQuery Event: click, dblclick, mouseover, ... Default is 'blur'.
  • beforeFreeze: [function(display, ev){} ] This function is called before converting the input field to display. "this" keywords in this fucntion refers to input field.
  • onFreeze: [function] This function is bound to input field element as an event.

jQuery Editable (changing options globally)

All these options are declared at $.fn.editables.options which means you can override them before start using them "which takes global effect".

$.fn.editables.options.beforeEdit = function(field){
  field.val(this.text());
  return true;
}
$.extend(
  $.fn.editables.options.beforeEdit,
  {
     editOn: 'mouseover',
     beforeEdit: function(inp){
        if(inp.val()==''return false; /*this prevent the conversion to editable*/
     }
  }
)

Download

Here is the link to Download jQuery inline Editable Plugin 1.0.1 and here is Sample for jQuery Editable.

If you need any feature to be added or have any question, please use below comment box.

Older version

jQuery Editable 1.0.0

jQuery Plugins with this Pattern

Lite jQuery Watermark (Placeholder) plugin with same pattern click here.

Flexible jQuery Validation (validator) plugin with same pattern click here.

Discover what we say about jquery | js | tutorial | plugin |
Tue, 07 24 2012

jQuery Template (jTemplate)

jQuery Template Engine (jTemplate) is flexible and smart. Just by adding some extra directives it can merge all sort of data st...

jQuery Validator Plugin (Validation Plugin)

There are hips of jQuery validation Engines out there. But still some cannot be flexible enough to cover all developers need. S...

jQuery Watermark Plugin (Best jQuery Placeholder)

This easy to use jQuery watermark plugin which adds watermark input and textarea elements. A watermark is lighter colored text ...

How To Make jQuery Plugin? (jQuery Plugin Hello World)

Here is a quick how to on making your own jQuery plugin. Extending jQuery with plugins and methods is very powerful and can s...

19comments

Peter
How can I submit data to the server?
Arash
Use beforeFreeze or onFreeze and do normal ajax call.

beforeFreeze: function(display){
if(this.val()=='') return false;
$.post('/url', { myValue: this.val() }, callback ); // or use $.ajax()
}
o
p
Jules
Hi, this is cool, thanks for making it available. How would I bind freezeOn to both blur and on pressing of the enter (and tab) key?
Jiboule
Thanks for this plugin ! I got a question though,

How can i set the freezeOn at the press of the "ENTER" key ?
jiboule
Sorry i didn't see that Jules asked the same question :\
cliff
nice one. short and elegant. is the source hosted on github or bitbucket?
Arash
Hi Jules and Jiboule

I upgraded the plugin. So in case, you want to bind more than one event, now you can pass an array
  freezeOn: ['blur', 'keyup']  
and in case you want to have it for on Enter
  beforeFreeze: function(display, ev){ if( ev.which!=13 ) return false; }  

I added an example in example page too.
Arash
Hi Cliff,

Now it's on github https://github.com/tectual/jQuery-Editable
Jules
Nice, thank you
cliff
Thanks Arash. I've stared it.
NK
What about edit on clicking another element? Say a hoverable button explicitly showing an 'edit icon' for a particular field. How should/do you trigger/make the field editable programmatically?
Arash
Hi NK, It's fairly easy and is not a primary need for this plugin. you can do it by
$('edit-icon-selector').click( function(){ $('particular-editable-selector').click() } )

Sure in case the element is editable on mouseover or any other event, you should replace .click() with the right one.
NK
Hi Arash, The point is that I can't programmatically trigger clicks since the item to be edit responds differently to a click (performs a particular action). Thus we have a separate icon viewable on 'hover' that allows for editing. Clicking that icon should make the field editable. Is there a way to call some method like
pre
$('#my-editable-item).edit()
pre

Arash
Hi NK, I can add it but not at this stage. Cause what you want to do is achievable by custom event editOn: 'startEditing' and then have sth like this:
$('edit-icon-selector').click( function(){ $('particular-editable-selector').trigger('startEditing') } )
to trigger the 'startEditing' event. In case you need more info, you can email us at tectual.com.au.
NK
Thanks Arash. I was thinking about using custom events. You response ascertains the same!
aaron
Debugging an issue where events are unbound from input or not propagating.. using bootstrap, jquery ui (the span is inside a div which is draggable)

something is preventing propagation or the blur event is forwhatever reason not firing after edit on input.
I screwed it all up somehow.
mzllon
Hi,when I looked for a plugin that the table cells clicked could edit,I found it.Now I have a question.If the table had 30 records,and every record had 4 palces that would edit.Well,the web page would create too many elements,would it affect speed? Lastly,How can I not confuse together?
Thanks for replying.
Arash
Hi, This plugin is not edit-table. It's a bit confusing as editable is used for edit-table and editable elements. You’d better look for editable tables or simply table plugins.
Subscribe Valid tags are b=bold and pre=code. line-breaks are detected automatically.