Being able to edit plain text in place is great, but why stop there? The next logical step is to using select options in place. If you’ve been looking for something like this then version 0.2.2 of Edit In Place is for you. Here is an example of how this works:
...
EditInPlace.makeEditable( {
type: 'select',
id: 'mycolor',
save_url: 'optionedit.php',
options: {
red: 'Red',
blue: 'Blue',
lightgreen: 'Light Green',
green: 'Green',
darkgreen: 'Dark Green',
pink: 'Pink'
}
} );
...
Pick a color: <span id="mycolor">Green</span>
...
To make this work there is a new editable type (select) and a new option (options). If you’ve been following Edit In Place then id and save_url are already familiar. Because the options option is a bit different than what we’ve seen before I want to explain in more detail.
In the example above the keys are red, blue, lightgreen, green, darkgreen and pink. They are used in the value portion of the option tag. The display names for the options are Red, Blue, Light Green, Green, Dark Green and Pink. These are what your user will see when using the select form. The display names are also used to figure out what the current selected value should be. In the above example the currently selected color would be green/Green.
The save_url script (optionedit.php) also gets additional information about the edit. For other types of edits the id and content variables are provided. For select edits there is an additional variable, option_name, that is passed in. The option_name is the display name for the option that was selected (i.e. Light Green). It is important that the script then returns the text of the display name so that it can displayed and used as the currently selected option if the user wants to edit it again. Where edit.php returned the contents (i.e. lightgreen) variable, optionedit.php returns the option_name variable. Nothing huge, but an important thing to remember when writing your back code to handle the AJAX save requests.
Go try it out on the updated example page and let me know what you think.
9 replies on “Edit In Place: Version 0.2.2”
Hi!
I am not very good at JS, I just start learning it and I have a problem I can not solve:
I am trying to use your eip for one of my projects.
Everything was fine until I tried to use eip in a div that was previouse loaded using AJAX.
First time, it’s ok, but when the content id dynamic regenerated (including the code necesary for eip), the eip it’s not working!
I tried using other events here, no results …
Event.observe(window, 'load', init, true);When I look at the page source (in Firefox) without selecting a certain part, I see the original page source, not the current one (the one modified using AJAX). I think this has something to do with my problem
On options would be to load the div content into a iframe, but this is not what I want.
Do you have any idea on how to solve this?
Hello,
I read the 24 ways article and also thought it was amazing but my javascript skills are a long way from being able to do what you do. Your hard work is helping me get ever closer to my goal so thanks for writing about it.
The one thing I’m having difficulty with is that I need to pass additional form variables to edit.php. I’ve looked though your code and I think I get it to work but calling it a kludge would be the nicest thing you would say about it. I want to make it flexible and set it up so I can pass extra values thought the makeEditable function. Is this something you’re thinking about adding? Is it already there and I just don’t see it?
Thanks again for your hard work.
Sheldon
Hello joseph
Well done for your script which works fine for me ( i have done some modification: like creating a function that dynamically make editable area wich a particular tage name and where the id starts with “edit_” i can post it if you are interested)
Anyway here the reason i write this comment:
I found a problem:
when you edit something and click on “SAVE” you have a red “Saving…” message displayed. the problem is when the server takes a longt time to execute the save you have plenty of time to double click on the “Saving…” message. ANd when you do that the script thinks we want to edit this text that can be a problem
As i know my english is crap, i have taken some screenshots:
http://afrenchtouch.free.fr/upload/eip1.jpg
when you double click again on saving… and save the changes:
http://afrenchtouch.free.fr/upload/eip2.jpg
regards
Hi Joseph,
I’ve just stumbled across your work on the edit in place script and its given me a couple of ideas for a projects we’re working on – but theres something i’m not sure about. With the textarea edit in place, do you think its possible to run it along side the the “Dojo Editor widget” (http://dojotoolkit.org/docs/rich_text.html)? The idea i’m playing with is having an initial prompt where the text area is allocated (click to add a description), then when they click it changes to the editor, they add a description, click save (which then writes to the db) and will then see it as normal text (should they want to come back and update the description). Obviously i’m thinking of potential issues which would prevent it from degrading gracefully or impact usability at all. What do you think? Am i barking mad? ;0) Any thoughts on this would be much appreciated..
Thanks,
Chris
Hi,
There is a suggestion.
‘Cancel’ button is unnecessary.
I think that cancelling edit should be applied when the input field is not on focus.
How do you think about that?
ileadu-
A few other people have mentioned onblur (focus off of form field) support. I’ve added it to my todo list.
Hi Joseph,
May I firstly congratulation you! Your’s is the first EIP script that I’ve actually managed to get working (using ColdFusion)!
There’s just one thing I want to double-check:
If I a list of items to have the EIP ability I list them in between the script tags? e.g.
Event.observe(window, ‘load’, init, false);
function init()
{
EditInPlace.makeEditable( { type: ‘text’, id: ‘price7’, save_url: ‘books.cfc?method=PriceUpdate’ } );
EditInPlace.makeEditable( { type: ‘text’, id: ‘price2’, save_url: ‘books.cfc?method=PriceUpdate’ } );
EditInPlace.makeEditable( { type: ‘text’, id: ‘price4’, save_url: ‘books.cfc?method=PriceUpdate’ } );
EditInPlace.makeEditable( { type: ‘text’, id: ‘price1’, save_url: ‘books.cfc?method=PriceUpdate’ } );
EditInPlace.makeEditable( { type: ‘text’, id: ‘price5’, save_url: ‘books.cfc?method=PriceUpdate’ } );
EditInPlace.makeEditable( { type: ‘text’, id: ‘price3’, save_url: ‘books.cfc?method=PriceUpdate’ } );
EditInPlace.makeEditable( { type: ‘text’, id: ‘price6’, save_url: ‘books.cfc?method=PriceUpdate’ } );
}
Again – huge thanks 🙂
Thanks for the script.
I made a little change to the script to get all the element by class name (in my case class .editable, .editableTextarea, etc), using the document.getElementsByClassName from prototype.
Thanks again.
Hi Joseph, I realize this is super old, but I inherited a web app that’s utilizing your EIP version 0.2.2 and they’d rather not rework everything, so I’m going with it.
The problem I’m having is that the selects are reordering the options based on the key of the key/value pairs provided. In my case, the key is employee IDs and the value is employee name. Since the name is what is displayed, I want it to be in order of the name. Is there an option that will either change the auto-order to go off the value instead of the key, or just leave it in the order that they are added?
Thanks!