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.