The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields.
Availability
script.aculo.us V1.5 and later.
Syntax
new Ajax.InPlaceEditor( element, url, [options]);
The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options.
Options
Option
|
Since
|
Default
|
Description
|
okButton
|
V1.6
|
true
|
If a submit button is shown in edit mode (true,false)
|
okText
|
V1.5
|
“ok”
|
The text of the submit button that submits the changed value to the server
|
cancelLink
|
V1.6
|
true
|
If a cancel link is shown in edit mode (true,false)
|
cancelText
|
V1.5
|
“cancel”
|
The text of the link that cancels editing
|
savingText
|
V1.5
|
“Saving…”
|
The text shown while the text is sent to the server
|
clickToEditText
|
V1.6
|
“Click to edit”
|
The text shown during mouseover the editable text
|
formId
|
V1.5
|
id of the element to edit +‘InPlaceForm'
|
The id given to the element
|
externalControl
|
V1.5
|
null
|
ID of an element that acts as an external control used to enter edit mode. The external control will be hidden when entering edit mode and shown again when leaving edit mode.
|
rows
|
V1.5
|
1
|
The row height of the input field (anything greater than 1 uses a multiline textarea for input)
|
cols
|
V1.5
|
none
|
The number of columns the text area should span (works for both single line or multi line)
|
size
|
V1.5
|
none
|
Synonym for ‘cols’ when using single-line (rows=1) input
|
highlightcolor
|
??
|
Ajax.InPlaceEditor.defaultHighlightColor
|
The highlight color
|
highlightendcolor
|
??
|
”#FFFFFF”
|
The color which the highlight fades to
|
savingClassName
|
V1.5
|
“inplaceeditor-saving”
|
CSS class added to the element while displaying “Saving…” (removed when server responds)
|
formClassName
|
V1.5
|
“inplaceeditor-form”
|
CSS class used for the in place edit form
|
hoverClassName
|
??
|
??
|
??
|
loadTextURL
|
V1.5
|
null
|
Will cause the text to be loaded from the server (useful if your text is actually textile and formatted on the server)
|
loadingText
|
V1.5
|
“Loading…”
|
If the loadText URL option is specified then this text is displayed while the text is being loaded from the server
|
callback
|
V1.5
|
function(form) {Form.serialize(form)}
|
A function that will get executed just before the request is sent to the server, should return the parameters to be sent in the URL. Will get two parameters, the entire form and the value of the text control.
|
submitOnBlur
|
V1.6
|
false
|
This option if true will submit the in_place_edit form when the input tag loses focus.
|
ajaxOptions
|
V1.5
|
(empty hash) {}
|
Options specified to all AJAX calls (loading and saving text), these options are passed through to the prototype AJAX classes.
|
Since version 1.6 you can provide the following callbacks in the options parameter:
Callback
|
Default
|
Description
|
onComplete
|
“function(transport, element) {new Effect.Highlight(element, {startcolor: this.options.highlightcolor});}”
|
Code run if update successful with server
|
onFailure
|
“function(transport) {alert(“Error communicating with the server: ” + transport.responseText.stripTags());}”
|
Code run if update failed with server
|
Examples
Single Line Edit Mode
<p id="editme">Click me, click me!</p>
<script type="text/javascript">
new Ajax.InPlaceEditor('editme', '/demoajaxreturn.html');
</script>
Multi Line Edit Mode
<p id="editme2">Click me to edit this nice long text.</p>
<script type="text/javascript">
new Ajax.InPlaceEditor('editme2', '/demoajaxreturn.html', {rows:15,cols:40});
</script>
The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.
Notes
Character encoding
The form data is sent encoded in UTF-8 regardless of the page encoding.
This is as of the prototype function Form.serialize. More info here (web).
If this doesn’t work, you can use iconv as outlined here (web).
Remove and force InPlaceEditor
To disable the InPlaceEditor behavior later on, store it in a variable like:
var editor = new Ajax.InPlaceEditor('product_1',...);
Later you can then remove the behaviour by calling:
editor.dispose();
This way, you can enable and disable In Place Editing at will.
You can also arbitrarily force it into edit mode like so:
editor.enterEditMode('click');
|