jQuery Inline Edit tutorial

Tags: editinplace, inlineedit, inplaceedit, JavaScript, jquery, plugin

A friend recently asked me to review his edit-in-place code which turned out to be a modification of the one found at http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax. Reading the tutorial on that page I asked myself how I would do this differently? Defining a global setClickable() function and then calling $('#editInPlace").click() is totally uncool, essentially limiting yourself to one edit-in-place area per page.

Since the concept of edit-in-place is so simple and the implementation should be likewise I want to try and tackle this as a tutorial by going through concepts and teaching to build from scratch.

The concept

There's a piece of text on a page, e.g. a heading or paragraph, looking plain and un-interesting. When you hover over it however a visual highlight, usually pale yellow, indicates that it's something special - an editable region. You then click on the text and it magically transforms into an editable box with save and cancel buttons tagged at the end. On clicking either save or cancel the editable box transforms back into its original form with text updated if saved.

The build

What we want to do is put these concepts into code whilst building something that's re-usable. A plugin will do the trick! Let's call our plugin inlineEdit.

We are only 3 steps away from achieving our goal! Follow along...

Step 1: Getting the basics right

The basic functionality consists of a static text element (span, div etc...) that can transforms into an input element on click. And on hover the text element will highlight to indicate special interactions.

Here's our first pass: Basic Interaction

Code explanation: Our plugin accepts a CSS class name defined in a stylesheet which is used to toggle the text element's classname - a class defining a background-color typically #ffC is sufficient for this. On clicking we replace the entire contents of the original text element with an input element and pass the original content into the input as its value. For now changes are saved when the input loses focus.

Step 2: Save, Cancel & Callbacks

As you may notice above we saved on blur and there is no way of canceling changes. Let's improve the interaction by adding a save button. This is important as you'd want to do something with the changes or allow a user to manually cancel. Every application does something different at the saving stage so we'll simply define a save callback and let the implementer decide what to do on save, be it Ajax post or what not. The save action is also cancelable by returning false inside the callback.

Here is our second pass: Save, cancel and callbacks

Step 3: Finishing Off

Our plugin is nearly there. Just a few nice finishing touches remaining. We want to give the user ability to change the button label and pass an initial value. Also to make the plugin more re-usable we want to move the core plugin code out to a separate file and reference it instead. To set the stage for further improvements in the future we also split the code into two distinct clauses.

Final result: Live Demo and source code is here

Usage

Now to use this brand spanking new plugin we simply apply it to any DOM element like so:

HTML

<span class="editable">Hello World!</span>

JavaScript - Basic

$(function() {
  $('.editable').inlineEdit();
});

JavaScript - Customised button label with save callback

$(function() {
  $('.editable').inlineEdit({
    buttonText: 'Add',
    save: function(e, data) {
      return confirm('Change name to '+ data.value +'?');
    }
  });
});

Feedback welcome - if you happen to improve upon this code base please share-a-like!

Enjoy!

Update 26-Aug-09: Added placeholder for cases when text is empty; changed label option to buttonText to minimise confusion.

Update 18-Oct-09 Fixed bug in setting initial value via script.

Update 17-Jan-10 Moved code to http://github.com/caphun/jquery.inlineedit. I will continue to improve this plugin from there. Feel free to fork it!

6th Aug 2009, 6:04 am PDT | RSS 2.0 | Comment | Trackback

Similar Posts

48 Comments

By Javier at 6 Aug 2009 2:34 pm PDT

I usually use Jeditable for this kind of things. I find it quite useful.
By caphun at 6 Aug 2009 10:24 pm PDT

@javier – Jeditable looks very good! Thanks for the link!
By dalin at 7 Aug 2009 1:47 pm PDT

I’m still getting a handle on jQuery syntax. Why
$(function() { …
and not
$(document).ready(function() {…
?
By caphun at 7 Aug 2009 3:21 pm PDT

@dalin – One’s a short form of the other, I’m just being lazy.
By Bram at 25 Aug 2009 5:19 pm PDT

Hi CaPhun, I really like your inlineEdit plugin . It’s much smaller and easier to use than jeditable! I do have one little problem tough, it’s when the content to be edited is empty or cleared by the user. I’d like to have an alternative text which is not used in the input field when clicked. Although I think it can be solved with css, do you have a suggestion how to do this in inlineEdit?
Thanks, Bram
By caphun at 25 Aug 2009 6:57 pm PDT

@bram – glad you like the plugin.

Having a default text label is a good idea. There are several alternatives. If the editable region is blank we could replace it with a label element that disappears on click or make the input box sticky if no content is present. The latter being one less click.
By Bram at 26 Aug 2009 4:56 am PDT

I’ve added the following lines near the bottom of the script:

if (self.text().length == 0) {
self.text(options.emptylabel);
}

And added an extra (empty) default option on top. It only sets the ‘emptylabel’ when the text is empty initially and doesn’t cover the case when the text is cleared. It would be nice to add a css class whenever the ‘emptylabel’ is used, so that it can be styled accordingly.
Cheers,
By caphun at 27 Aug 2009 1:43 am PDT

@bram – I just added a placeholder option to deal with your situation. Now if the editable region is empty initially or made empty a placeholder will be added. The placeholder defaults to “Click to edit” but you could change it to something else via the placeholder option. There is also a class tagged onto this generated placeholder. Source code and demo updated.
By Bram at 3 Sep 2009 4:35 am PDT

Thanks a million! I’ll checkout your jquery-ui rewrite later.
By calin at 17 Oct 2009 10:05 pm PDT

how can be this combine with php to use a database?
By caphun at 18 Oct 2009 11:08 pm PDT

@calin: use the save callback. Here’s an example:

http://yelotofu.com/labs/jquery/snippets/inlineEdit/save/demo.html
By calin at 19 Oct 2009 3:50 pm PDT

do you have an example of the php file?
By caphun at 19 Oct 2009 6:23 pm PDT

sure:

http://yelotofu.com/labs/jquery/snippets/inlineEdit/save/backend.php.txt

I’m using sessions to generate a unique experience – not recommended for production. You should replace with db read/write.
By calin at 21 Oct 2009 11:23 pm PDT

I played around with it but I want to make a change,
by saving a number in that field
if it starts with 1234 and I want to enter 4000 but I type by mistake 40a0 I receive an alert and then the field becomes again 1234 and does not remain open for input; can you give me a solution?
By caphun at 21 Oct 2009 11:46 pm PDT

@calin: I think that’s by design. To save your change you will have to click on the “save” button. What alert are you getting? Could you post up a demo?
By calin at 21 Oct 2009 11:59 pm PDT

maybe I didn’t explain very well
I want to put in js a check for the input field to accept just numbers;
function check_edit(myval) {
var tn = myval;
var tnPat = /^(0|([1-9](\d{1,4})?))(\.(\d{1,2}))?$/;
var tnArray = tn.match(tnPat);
if (tnArray == null) {
alert(”the value is not a number !\n(99999.99)”);
return false;
}
}

end then I have
return check_edit(data.value);

If I enter by mistake a letter, it shows the alert, but then the input field because didn’t passed the check receives the initial value; I want to say that the field does not remain open for input, I must click again on the span to edit it again, and re-enter the value
By caphun at 22 Oct 2009 2:06 am PDT

right, I see what you are saying. As return false is equivalent to moving focus away from the input it will cancel the edit. I will give this some thought. Maybe it’s more intuitive for return false to simply cancel the save operation and maintain the state of the input box? That makes sense actually.
By calin at 22 Oct 2009 2:18 am PDT

yes it makes sense;
to complicate a little bit there are 2 cancels:
- if you need a confirm and you abort the change, then you send a cancel, after that the input disappear
- if you check the field for a desired value or type, and you receive an alert then you receive another cancel, which keeps the input
By caphun at 22 Oct 2009 2:47 am PDT

@calin: Actually I would argue that it’s just one. Even with the confirm dialog it should just go back to the input box if false is returned.
By James at 8 Dec 2009 12:01 am PST

Heya,

Great plugin, I have a question tho – I want to use the jquery live event on it (http://docs.jquery.com/Events/live) so I can add elements e.g. list elements with editable fields as at the moment only the original elements are editable.

I have tried replacing instances of bind with live however I just keep breaking it whatever I try. Any advice as to what I can do?

Thanks
By caphun at 8 Dec 2009 2:38 am PST

@james: Thanks Could I see an example of what you’re trying to do?
By James at 8 Dec 2009 3:21 am PST

This code is what i’m doing, just cut down somewhat. Basically select an ‘example page’ from the drop down list and it will add a list item to the test list. I have used the jquery .live so I can delete and move the added list items, but I can’t seem to do this with the inline edit.

Example Page 1
Example Page 2

Choose Page
Example Page 3
Example Page 4

function buildString(elementID, count){
var li_string = ‘

‘ + elementID + ‘

function sortable(){
$(”#test-list”).sortable({
handle : ‘.handle’,
update : function () {
var order = $(’#test-list’).sortable(’serialize’);
counter = order.size();
$(”#info”).load(”process-sortable.php?”+order);
}
});

$(’#test-list li img.delete’).live(”click”,function(){
// Delete element
});

$(’.editable’).inlineEdit({
buttonText: ‘Add’,
save: function(e, data) {
return confirm(’Change name to ‘+ data.value +’?');
}
});

$(’#menu_select option.page’).click(function(){
$(this).remove();
var counter = $(’#test-list li’).size() + 1;
var select_val = this.value;
$(buildString(select_val, counter)).appendTo(’#test-list’).hide().css(’opacity’, 0).slideDown(’slow’, function(){
$(this).fadeTo(”slow”, 1);
});
i++;
});
}
sortable();

Thanks
James
By James at 8 Dec 2009 3:29 am PST

Ooops the code got formatted weird, I’ll try putting it in pre tags

Example Page 1
Example Page 2

Choose Page
Example Page 3
Example Page 4

function buildString(elementID, count){
var li_string = ‘

‘ + elementID + ‘

function sortable(){
$(”#test-list”).sortable({
handle : ‘.handle’,
update : function () {
var order = $(’#test-list’).sortable(’serialize’);
counter = order.size();
$(”#info”).load(”process-sortable.php?”+order);
}
});

$(’#test-list li img.delete’).live(”click”,function(){
// Delete element
});

$(’.editable’).inlineEdit({
buttonText: ‘Add’,
save: function(e, data) {
return confirm(’Change name to ‘+ data.value +’?');
}
});

$(’#menu_select option.page’).click(function(){
$(this).remove();
var counter = $(’#test-list li’).size() + 1;
var select_val = this.value;
$(buildString(select_val, counter)).appendTo(’#test-list’).hide().css(’opacity’, 0).slideDown(’slow’, function(){
$(this).fadeTo(”slow”, 1);
});
i++;
});
}
sortable();
By James at 8 Dec 2009 3:30 am PST

Obviously not working, I hope you get the idea, I can email it if you want?
By caphun at 8 Dec 2009 1:53 pm PST

@james: I should have mentioned jsbin.com eariler. Could you put it there? It would be easier for me to see what the code is doing.
By James Lang at 8 Dec 2009 5:59 pm PST

http://jsbin.com/ukiwa
http://jsbin.com/ukiwa/edit
By caphun at 8 Dec 2009 7:28 pm PST

Here’s a possible solution:

http://jsbin.com/ohuzo/edit
By James at 8 Dec 2009 10:33 pm PST

That works perfectly, thanks so much.

Sorry to bother you again, but I have another page with a similar issue i.e. html created after dom initiated and the inline edit not working. I tried what you did to get the last one to work but it doesnt seem to have sorted it.

Any chance you could have a look? I am so sorry to trouble you again!

http://jsbin.com/ifumi/edit
By caphun at 8 Dec 2009 11:19 pm PST

All I did was move the inlineEdit call into the blur callback:

http://jsbin.com/ufaju/edit
By indialike at 16 Dec 2009 6:37 pm PST

Very nice and useful tutorials to web designers,
Thanks for posting.
By tom at 14 Jan 2010 5:05 pm PST

Heloo caphun, i’ve tried your plugin and its work very well, but there is a problem, i wants to modified your plugin, i want to change the input style into a text area, but i got some error, i dont get a value of the new data

else if ($this.is(self[0].tagName) || $this.hasClass(’inlineEditText-placeholder’)) {
self
.html(”+ self.value() +’ ‘+ options.buttonText +”)
.find(’textarea’)

if i run this, there will appears a confirm box

” Change name to undefined? ”

can you fix this ??? Thanks before (^_^)
By caphun at 14 Jan 2010 6:54 pm PST

@tom: thanks

Actually I have a version of this plugin that supports textarea. It might be slightly buggy but will put it up on github.com very soon.
By caphun at 15 Jan 2010 4:10 am PST

As promised I have moved this code to github.com

http://github.com/caphun/jquery.inlineedit

Feel free to fork it!
By tom at 15 Jan 2010 11:55 am PST

Wow, thanks a lot for your help, its work properly now. Many thanks from me.. (^_^)
By kalyan at 24 Jan 2010 3:38 pm PST

Caphun,Great plugin and thank you for sharing. Your plugin is working for me except for one scenario where I was adding new row to the table through jquery. Inline edit is only working for old rows but not the new rows that were added through jquery. Can you please help me on this..
I placed my code here..

http://jsbin.com/anumi3/edit
By kalyan at 24 Jan 2010 3:58 pm PST

Caphun,You already gave the solution for this.. http://jsbin.com/ohuzo/edit
It worked for me too..Thank you
By kalyan at 24 Jan 2010 4:56 pm PST

Caphun,Would I be able to capture/know the currently edited and saved id or name of the or or . at the function $(’.editable’).inlineEdit /
Thanks
By caphun at 24 Jan 2010 9:52 pm PST

Hello Kalyan. Thanks for the compliments. Yes, it’s possible to know the currently edited element within the save callback by simply using “this”. to get the id of the element use this[0].id, this[0] is the span element.

As for your other questions here’s a code snippet to demonstrate it working via re-binding:

http://jsbin.com/okese3/edit

Since jQuery 1.4 supports focus/blur through the focus(in|out) events I will switch to the .live() method soon.
By amarushakur at 21 Feb 2010 7:18 pm PST

I really liked your example but i will like to apply some validation to the editable contents before they are saved. i want both a client side and php server side validation. if the validation fails, the edited contents should not be saved.
By amarushakur at 21 Feb 2010 7:43 pm PST

my page uses a php script to display a table of records from a databse. i need help on inline editing such that when a user clicks on a row, the fields become editable and the edited contents are validated both at the client side and php server side before it is finally saved. Please help me. its my final year project. the server side script is jquery
By caphun at 22 Feb 2010 12:01 pm PST

@amarushakur: It is certainly possible to validate the contents before submission. Take a look at my save example within demos here:

http://github.com/caphun/jquery.inlineedit

You can place client-side validation inside the save callback function.

Hope that helps.
By Chris at 25 Feb 2010 11:39 pm PST

Very nice. Is it possible to send a hidden ID field along with the updated text using ajax so that the correct database field is updated. I’m sure this is trivial but I am not getting it.
By caphun at 26 Feb 2010 12:25 am PST

@chris – yes just add another value to the ajax data object when saving, e.g.

$.ajax({ data: { 'action': 'save', 'value': data.value, 'id': 'my-hidden-id-value' } });
By Chris at 26 Feb 2010 12:31 am PST

I guess while I’m at it, I need to be able to do this on a single row at a time in a table. The idea is to be able to take a numeric text field and modify it while submitting the results to the database with ajax. I can do this (sort of) but the id is returning the same for each row. It is just using the first id from the first row.
By Chris at 26 Feb 2010 12:35 am PST

This is what I have done in the js.

var id = document.getElementById(’holidayID’);
var html = $.ajax({
data: { ‘action’: ’save’, ‘value’: data.value, ‘id’: id.value }
By caphun at 26 Feb 2010 12:52 am PST

@chris – that won’t work since the ID attribute is supposed to be unique. The entire HTML page should only have one holidayID. A better approach would be to look-up the closest container and grab the corresponding. If you put up a very minimal example script on http://jsbin.com I could give more specific advise.
By jeffery at 4 Mar 2010 2:10 pm PST

hai, this seems to be a very good replacement for jeditable plugin…..but i need to apply validations for the editable fields…..is it posiible to do this here….

cuz am not just getting it right to work with validations and edit together…

can just show any sample codes of how to implement it…. it would be a great help….
By Michael at 12 Mar 2010 1:53 am PST

Hi,

First I would like to thank you for a great script.

I am having some difficulties with certain characters.
You should be able to replicate the bug if you go to your demo (http://yelotofu.com/labs/jquery/snippets/inlineEdit/demo_final.html) and type a smiley, for example , and then click on save.
When I do that I get:

uncaught exception: Syntax error, unrecognized expression:

Any ideas?

Thanks!