UPDATE Thu 29 Nov 2007 @ 5:30pm : The Edit In Place code has a new home at editinplace.org
UPDATE Fri 30 Jun 2006 @ 8:20am : You can find the latest Edit In Place blog posts at http://joseph.randomnetworks.com/tag/editinplace
It has been almost two months since my since the first version of Edit In Place (version 0.1.0). Since then I’ve been trying to beef up some my JavaScript foo. I also discovered some problems with code that needed to fixed. So today I’m releasing version 0.2.0 of Edit In Place (eip). Before I get into the changes in the new version go check out the new example.html page. Or go grab the 0.2.0 release file.
Doing OO in JavaScript is a bit strange. Because of some other limitations I ended not making on Edit In Place class, instead there are several supporting functions prefixed with EditInPlace to try and avoid name space collisions. The 0.1.0 code didn’t deal with errors when a save attempt failed, that has been fixed in 0.2.0. Now when a save attempt fails the original text is put back and an alert in displayed indicating that the changes were able to be saved. Perhaps not the most elegant and certainly not the most flexible, but a reasonable start and much better than what we did before (which was worse than nothing).
There are some new default CSS names used:
.eip_editable { background-color: #ff9; padding: 3px; }
.eip_savebutton { background-color: #36f; color: #fff; }
.eip_cancelbutton { background-color: #000; color: #fff; }
.eip_saving { background-color: #903; color: #fff; padding: 3px; }
Making IDs editable have new function calls as well:
Event.observe(window, 'load', init, false);
function init() {
EditInPlace.makeEditable( {
type: 'text',
id: 'editme',
save_url: 'edit.php'
} );
EditInPlace.makeEditable( {
type: 'textarea',
id: 'anotheredit',
save_url: 'edit.php'
} );
}
The EditInPlace.makeEditable() function only requires the id and save_url, the type option defaults to text. There are plenty of other options you can set if you feel so inclined. Here are the defaults:
id: false, save_url: false, css_class: 'eip_editable', savebutton: 'eip_savebutton', cancelbutton: 'eip_cancelbutton', saving: 'eip_saving', type: 'text'
The css_class, savebutton, cancelbutton and saving are all CSS classes. The id is DOM id that you want to be editable. The save_url is the URL to call when saving changes. The type is the form type to use, right now this must be either text or textarea.
My JavaScript skills are still pretty basic so if you have some recommended changes feel free to drop me a note. You can find all of the example and release files at http://josephscott.org/code/js/eip/.
UPDATE Fri 9 Jun 2006 @ 1:30pm : I forgot to mention how size of the form fields work in this new version.
June 7th, 2006 at 10:43 pm Joseph Scott’s Blog » Blog Archive » AJAX Edit In Place With Prototype
[...] UPDATE Wed 7 Jun 2006 @ 11:45pm : Before you get too attached to what is described here there is a new version you should look at: AJAX Edit In Place With Prototype, Version 0.2.0. [...]
June 8th, 2006 at 12:03 pm warpedvisions.org » Blog Archive » A Prototype.js edit-in-place example
[...] June 8th, 2006 in Links AJAX Edit In Place With Prototype, Version 0.2.0. [...]
June 8th, 2006 at 4:24 pm GlitchNYC » Blog Archive » links for 2006-06-09
[...] AJAX Edit In Place With Prototype, Version 0.2.0 I’d love for the comments feature on our internal helpdesk app to be ajax-enabled so you didn’t have to reload the page. This might do the trick (tags: ajax javascript webdesign webdev) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
June 9th, 2006 at 12:31 am Anders Rasmussen
Sweet,
I was just wondering, the following seems a bit redundant ..
function init() {
EditInPlace.makeEditable( {
type: 'text',
id: 'editme',
save_url: 'edit.php'
} );
EditInPlace.makeEditable( {
type: 'textarea',
id: 'anotheredit',
save_url: 'edit.php'
} );
}
What are the chances of putting the ID’s in an array or something similar? The current solution is not that elegant once you exceed a number of EditInPlace elements, perhaps something like; id: ‘editme, editme2, editme3, someotherid, editmetoo’, ..
In any case, nice write-up – very inspiring. :-)
a.
June 9th, 2006 at 12:37 am joseph
Taking a list of ids would work if they all were for the same type of edit and used the same save_url. When I was working on this I figured that most people would want the ability to customize each editable id more than doing the same thing over and over.
If nothing else a simple wrapper function would allow for what you described.
June 9th, 2006 at 4:56 am Jeff
Nice job. I like the usability of normal-looking text becoming editable with a click.
In Firefox, the editing caret disappears when the text becomes editable. Any way to restore it?
June 9th, 2006 at 5:38 am Axman6
Is it just me, or is this the perfect thing for wiki’s? stick this on wikipedia, and it’ll just fly agone (not that it isn’t already, but faster maybe :s)
Anyway, cya.
Al.
June 9th, 2006 at 5:40 am Keith
That’s great piece of code. Is it possible to add authentication to it, such that only authorised users can edit the page?
June 9th, 2006 at 5:43 am Rob
I was looking for an edit in place that requires the user to be logged in as an administrator in order to be able to edit in place and save it. Is it possible with yours?
June 9th, 2006 at 6:09 am Guto
Very interesting… But I have some sugestions…
How about not one but 5 editinplace elements in your lib?
EditInPlaceTextField (need for 1 line text)
EditInPlaceTextArea (that one that you just did)
EditInPlaceCombo (combo box get from an xml)
EditInPlaceComboAutoComplete (using the autocomplete from prototype lib)
and finally
EditInPlaceCheckBox (true or false parans)
That would be very interesting…
But it’s already good the way it is!
June 9th, 2006 at 6:38 am falcon
I can’t tell from the description here, I think it will be very useful to have such a component which doesn’t communicate with the server. A component which only changes the DOM (so save would confirm the change, ‘cancel’ would revert back to whatever existed before). This will be helpful for those of us who need to have our users change many things before saving them all together ourselves.
June 9th, 2006 at 6:45 am Rich Waters
Not bad for a simple example. There is one build into scriptaculous that is a bit more feature rich. Check out the controls.js file in scriptaculous to see their implementation.
June 9th, 2006 at 7:19 am Kevin
AWESOME!!! Thanks for this! I’ve been building a very simple validator for a CSV file and needed to have something like this so that when problem data is displayed in a HTML table, they can click on it and edit it.
I need to integrate a prepopulated select list as one of the formField types. When I get the code worked out I’ll send it to you!
Thanks again for this!
Kevin
June 9th, 2006 at 8:59 am Michael Williamson
If you double click very quickly on it, two text areas with appear (in your example). If you tripple click very fast, you can get three!
June 9th, 2006 at 10:01 am Sean O
Anders,
My thoughts exactly.
I threw together a modified version of this script, using an array to populate each id. Add or subtract as many as you like, the script will create a text file with that id’s name, or update if it already exists.
http://home.comcast.net/~rhyno2000/editinplace_v021.zip
June 9th, 2006 at 12:24 pm Joseph Scott’s Blog » Blog Archive » Edit In Place: Size Of Form Fields
[...] April 2004 « AJAX Edit In Place With Prototype, Version 0.2.0 [...]
June 9th, 2006 at 12:52 pm ã�æäÉ Çá�ßÊæÑ äÊ
ÊØÈÃÞ ÊÃ?ÑÃÑ ÇáäÕ Ã?à ÇáÕÃ?Ã?É 龂 ÃÌÇßÓ…
…
June 9th, 2006 at 2:03 pm Gobble Gobble » AJAX Edit In Place With Prototype, Version 0.2.0
[...] AJAX Edit In Place with Prototype lets you edit text in line like Flickr. This new version fixes some bugs, is more flexible and cleans up the JavaScript code.read more | digg story You can leave a comment, or trackback from your own site. RSS 2.0 [...]
June 9th, 2006 at 4:19 pm Bloggitation » links for 2006-06-10
[...] AJAX Edit In Place With Prototype (tags: ajax design programming web2.0) [...]
June 9th, 2006 at 5:28 pm SitePoint Blogs » links for 2006-06-09
[...] AJAX Edit In Place With Prototype, Version 0.2.0 Updated version of a JavaScript library to make page elements editable and submit the changes using AJAX. (tags: javascript ajax) [...]
June 9th, 2006 at 8:26 pm The Exile » links for 2006-06-10
[...] Joseph Scott’s Blog » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0 (tags: editinplace ajax) [...]
June 10th, 2006 at 5:33 am Dee’s-Planet! » AJAX Edit In Place With Prototype, Version 0.2.0
[...] Check out the new example… Download: 0.2.0 release | [...]
June 10th, 2006 at 8:33 am Ivo Jansch
We use a similar technique in epointment.com, when editing epointments; also using prototype. The hardest part has been making the editor mode look exactly like readonly mode, which almost succeeded except for multiline textarea’s. I’ll see if I can make this script available.
June 10th, 2006 at 10:19 am Mr.Ale
How to use bd mysql, i am amateur…
June 10th, 2006 at 11:00 am anandsueman.com » Blog Archive » Some usefull items
[...] AJAX Edit In Place With Prototype, Version 0.2.0 Updated version of a JavaScript library to make page elements editable and submit the changes using AJAX. (tags: javascript ajax) [...]
June 12th, 2006 at 7:00 am acedanger
Can you put two fields side by side and make each of them inline edittable? What I found, from my own experience, was that each EIP field had to be on it’s own line, unless you use a table. If you use a table, you can’t use most of the effects from the prototype framework. I found the inability to do this frustrating to say the least.
June 12th, 2006 at 7:26 am BlueSparc design, technology news » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0
[...] Technology such as thisbrings the internet back to its roots, a platform everybody can read, edit, and enjoy! [...]
June 12th, 2006 at 10:00 am links for 2006-06-11 at Bjtitus.net
[...] Joseph Scott’s Blog » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0 AJAX Edit in Place w/ Prototype (tags: webdesign web2.0 webdevelopment webdev javascript design komen ajax) No Tags [...]
June 12th, 2006 at 10:49 am Elliott Cable
Is it just me, or is this the perfect thing for wiki’s? stick this on wikipedia, and it’ll just fly agone (not that it isn’t already, but faster maybe :s)
Anyway, cya.
Al.
That’s exactly what I am doing. I am busy trying to integrate this into section editing for MediaWiki *right now* – if you are interested in helping, you can e-mail me me (elliott@starcolon.com).
June 12th, 2006 at 12:17 pm andy brudtkuhl » Blog Archive » links for 2006-06-12
[...] Joseph Scott’s Blog » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0 It has been almost two months since my since the first version of Edit In Place (version 0.1.0). Since then I’ve been trying to beef up some my JavaScript foo. I also discovered some problems with code that needed to fixed. So today I’m releasing vers (tags: ajax javascript prototype editinplace development) [...]
June 12th, 2006 at 3:18 pm Some Random Ajax Links from around the Web | Ajax Blog
[...] Ajax Edit in Place with Prototype, v0.2.0 [...]
June 12th, 2006 at 3:39 pm Joseph Scott’s Blog » Blog Archive » Edit In Place: Version 0.2.1
[...] I’ve been getting lots of great feedback on Edit In Place. As time permits I hope to fix problems and round out the feature set a bit more. To that end I’ve rolled out version 0.2.1. Here’s a list of what has changed since version 0.2.0: [...]
June 14th, 2006 at 7:08 am COLD CASE » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0
[...] read more | digg story Explore posts in the same categories: coldcase [...]
June 16th, 2006 at 3:12 am The WP Themes » AJAX Edit In Place
[...] AJAX Edit In Place With Prototype, Version 0.2.0 Click here! [...]
June 20th, 2006 at 2:59 am Quick Link: Ajax Edit in Place using Prototype - davecentral Planet David Central & Dave Central Planet
[...] Joseph Scott offers up a new version of his Ajax Edit in Place using Prototype script. Comes in at 3.6k uncompressed in addition to the Prototype Library. [...]
June 30th, 2006 at 1:03 am Ivo Jansch
The script we had for epointment.com, which I mentioned in comment 23 above, is now available here:
http://www.epointment.com/software/eeip
Joseph, perhaps we can see if we can combine forces?
July 3rd, 2006 at 7:13 pm » Some interesting and useful AJAX/Javascript code
[...] I like seeing more and more uses of prototype. I’m not sure if the big guys will win out with their UI toolkits (Yahoo UI/GWT) or if it will always feel better to put things together by hand. Either way it is good to understand how this stuff works. This is an edit in place example that is similar to what you see on flickr. [...]
July 15th, 2006 at 8:17 pm John
How would you go about doing this if you wanted to edit a whole table row’s worth of fields that might be made up of a variety of different form fields? Like instead of hovering over each individual item, you have a link at the end of the row that says edit which then brings up form fields for the whole thing?
July 25th, 2006 at 6:31 am karthi
how to execute the php files with the ajax prototype1.4.0?
August 2nd, 2006 at 12:03 pm Tim Harper
Jeff,
I’m getting the same exact problem. It’s very annoying, I’ve worked hard to find a work around but haven’t found anything yet.
Tim
August 12th, 2006 at 7:06 pm Tim Harper
Jeff,
I’m getting the same exact problem. It’s very annoying, I’ve worked hard to find a work around but haven’t found anything yet.
Tim
August 23rd, 2006 at 11:09 pm Programming » AJAX Edit In Place With Prototype, Version 0.2.0
[...] AJAX Edit In Place with Prototype lets you edit text in line like Flickr. This new version fixes some bugs, is more flexible and cleans up the JavaScript code.read more | digg story [...]
September 9th, 2006 at 3:43 am bratwurstler
works perfectly. thank you =)
October 5th, 2006 at 12:32 am Alex
I have started to put together a wiki about Prototype. Sergio Pereira’s documentation is wonderful, but this way everyone can contribute to the documentation. It would be much like the annotated PHP help downloadable from php.net.
Have a look at http://www.formar.se/prototype
October 15th, 2006 at 8:08 pm Prototype.js Documentation » Edit In Place With Prototype
[...] http://joseph.randomnetworks.com/archives/2006/06/07/ajax-edit-in-place-with-prototype-version-020/ [...]
October 16th, 2006 at 10:48 pm Myrian
is it possible to use WYSIWYG editor like tinyMCE in edit?
December 3rd, 2006 at 8:29 am Sam
Hi, is it possible to add authentication to that code?
December 3rd, 2006 at 9:08 pm SumpyGump
There is an error in the file:
This:
// Complete the failed AJAX request.
EditInPlace._saveFailed = function(id, t) {
var id_opt = EditInPlace.getOptionsReference(id);
Should be changed to this:
// Complete the failed AJAX request.
EditInPlace._saveFailed = function(id, t) {
var id_opt = EditInPlace._getOptionsReference(id);
This is a really cool thing. Great work!
December 6th, 2006 at 9:00 pm Sumpygump
Also, I think this is helpful for textarea edits:
Change the following line:
field += ‘>’ + id_opt['orig_text'] + ‘\n’;
to this:
field += ‘>’ + id_opt['orig_text'].replace(//g, “”).replace(//g,”") + ‘\n’;
This way when the end user is editing the content, it will not have the html br tags in there, which it probably didn’t in the first place when they typed it. It depends on the situation of course, like if the textarea contains html.
Just something to throw out there.
December 29th, 2006 at 6:15 pm Richard S
Works great … can I implement it in my site?
February 8th, 2007 at 11:58 am Lorenzo
Stupid question. If I have many records to editinplace into the same page?
I have 4 record with the same fields
1) id1 Name Surname Address Phone Email
2) id2 Name Surname Address Phone Email
3) id3 Name Surname Address Phone Email
4) id4 Name Surname Address Phone Email
I must change the funcion? Is it possible?
Thanks a lot!
Lorenzo
March 23rd, 2007 at 5:52 am Pepo
Hi! I’m new on AJAX… Basic question (I think!)
In the index.html I have EditInPlace.js and prototype.js definition and works well (only in the firs page). I think because Event.observe(window, ‘load’, init, true); put listeners only in this window.
After I call with AJAX a code to put in a DIV layer new fields, and there EditInPlace don’t run, in this new fields.
Somebody say my to work with IFRAME, but i don’t like.
Has anyone a example to include in dinamic AJAX source an makeEditable() call, because I try a lot of things but it can’t run!
Thank’s for all!
May 29th, 2007 at 6:40 am bucon
is it possible to make it secure editing for example only the administrator can change text, cause otherwise anyone can edit your hard work.
June 13th, 2007 at 1:58 pm Jean
Great work, however there should be some kind of authentication. Is this planned in next version? Thanks
June 17th, 2007 at 1:39 pm Sascha Leib
This looks great, and in fact much better than the one from Script.aculo.us.
My only problem is that I can’t find a smooth way to send errors back to the user (stuff like “the database is down, please try again later”…)
Any ideas?
/sascha
August 23rd, 2007 at 3:23 pm Waldemar
Hi!
I was wondering if you could add a smiliar to “Click to edit” in your previous version of AJAX Edit In Place?
It was in the old version (0.3.3 http://josephscott.org/code/js/eip/example.html) and it would be so cool if you could add it in this version or in the following version.
Many thanks for a wonderful script!
//Waldemar
August 23rd, 2007 at 11:13 pm Tom
This might be a bug.
I cant seem to save the data when on_blur: “cancel”
August 23rd, 2007 at 11:29 pm Tom
onblur: “save” doesn’t work either
September 6th, 2007 at 8:00 am walter
For me it’s perfect.
I just need to know how to setup the connection to my database (sql)
Where is the part of the code to do that, so that i can set up the connection to my database
thanks
September 6th, 2007 at 1:57 pm walter
This line:
// Store the current (original) value of the editable id.
id_opt['orig_text'] = $(id).innerHTML;
in editInPlace.js
DOES NOT WORK IN SAFARI
October 9th, 2007 at 10:26 pm kerry webster » Blog Archive » AJAX Application Reference
[...] AJAX Edit In Place Another edit in place AJAX script, this one has many options. [...]
November 22nd, 2007 at 6:41 pm 40 Useful AJAX Applications - UltraFREE.net
[...] AJAX Edit In Place Another edit in place AJAX script, this one has many options. [...]
January 7th, 2008 at 3:57 pm siera
Need some help. wondering if anyone can help me.
I want to change something on my bebo. i know how to edit it and get it to the way I want. the problem is when i refresh the page it goes back to normal and everything i’ve edited disappears. is there anyway i can save it the edited way so that when its viewed by anyone it shows up the edited way?
any help is much appreciated. drop me an email at siera21.x@hotmail.co.uk
January 9th, 2008 at 2:18 pm Joseph Scott
@siera -
I’m not familiar with bebo, your best bet is to contact them and ask for help.
February 5th, 2008 at 6:44 pm Emerald
Hi Joseph,
this is awesome! Thanks heaps for it. Only one thing, I have a mysql database and use php.
How do I get it to update the database?? Im a novice. Thanks heaps
May 15th, 2008 at 12:39 pm Brandon Quintana » Blog Archive » AJAX Edit in Place With Prototype
[...] point and click. Now there are many ways to tackle the problem but there is some pretty good documentation on Joseph Scott’s blog. Now I wouldn’t say this is a perfect solution, no solution [...]
August 11th, 2008 at 4:35 am AJAX Unplugged! « KoshysHome.COM
[...] AJAX Edit In PlaceAnother edit in place AJAX script, this one has many options. [...]
February 25th, 2009 at 12:51 am in place editing di ruby on rails « dimas priyanto
[...] http://joseph.randomnetworks.com/archives/2006/06/07/ajax-edit-in-place-with-prototype-version-020/ [...]