Categories
josephscott

AJAX Edit In Place With Prototype, Version 0.2.0

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.

67 replies on “AJAX Edit In Place With Prototype, Version 0.2.0”

[…] 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. […]

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.

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.

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?

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.

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?

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!

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.

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

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!

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.

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.

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

[…] 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) […]

[…] 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. […]

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?

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

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!

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.

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

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!

Great work, however there should be some kind of authentication. Is this planned in next version? Thanks

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *