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.