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:

Click me!

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...

19

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()

     }

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.

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.

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.

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.

Enter Your Name Email (optional) Website (optional)

Enter Your Comment

Valid tags are b=bold and pre=code. line-breaks are detected automatically.