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!
@jason: don’t fully understand what you’re trying to do with .load() and .inlineEdit(). Could you put something on jsbin?
Just curious if anyone knows why this would have issues with French characters? When I display certain French text on the page, I get an uncaught exception from Javascript and everything fails.
Looking for suggestions. I can’t share my actual page as it’s in a corporate dev environment.
@jeff: afaik, French characters should be supported. I could look into this if you put related code on jsbin.com that demonstrates this issue.
Hi,
This is a great plugin, but only seems to work with mouse interaction (unless I’m missing something!).
When the enter key is pressed while the input box is enabled, the whole form is submitted; if you tab to focus the “save” button, the edits are discarded because the input field lost focus.
Any ideas for making this keyboard-friendly?
Thanks,
Tim
A little bug in plugin was found.
… self.html(‘<input type="text" value="'+ self.value() +'…
this code doesn't works if self.value() contains " (double quotation mark).
Can be fixed using attr() method for setting input value:
self.find('input').attr('value', self.value())
@tim: you’re completely correct. I’ll look at making this keyboard-friendly!
@igor: thanks for the bug report!
Hi Caphun,
First of all, great script. I had a biggie question though. I’m trying to figure out how to save for a table within mySQL database. I noticed you have the php version setup for a session and I guess I’m pretty novice when it comes to combining javascript and php together. Could you please help me out??
I have like 5 different fields I want to change within my “USERS” table.
1. Firstname
2. Lastname
3. Phone
4. Email
5. Website
Regards,
-Shaun
Hi,
Great script – helps a lot. I also needed to have key capture – Enter to save and Esc to quit. I added the following in the mutate function
.find( self.options.control )
.keyup( function( event ) {
if (event.keyCode == ’13′) {
self.save( self.element, event );
self.change( self.element, event );
} else if (event.keyCode == ’27′) {
self.change( self.element, event );
}
})
.end()
Hope it helps.
Oh and is there any reason why placeholders would not be set on load?
@mathew: thanks for giving back! I added your change to the codebase, see:
http://github.com/caphun/jquery.inlineedit/commit/38477ad62b838954aa9f92b9874e538351e30de5
Hi, first great script. I like it and have started to build an grid around it. But i have ran into issues especially IE8.
Even the basic example at the top of the page does not work in IE8.
Mozilla Firefox works nicely. In IE8 using basic example if you click on “Joe Blogg” and start to type before “Joe” works good but if you start to type after “Joe Blogg” it does nothing then when u click to lose focus the text box stays there and cannot be changed. Please tell me there is a fix for this b/c i really like the script.
Thanks in advance
I figured out the issue with IE8. When the field is changed to a textbox the self.bind(‘click’) event still gets called. I wrote a mod that will actually determine if the control contains text or a textbox before continuing on with the rest of the code in the click event. Hopes this helps someone else! thanks for the script