Ajax.InPlaceCollectionEditor

Generates a selectbox from the values in the collection array.

Syntax

new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } );

The constructor takes three parameters.

1. | element: The element that should support in-place editing.

2. | url: 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).

3. | hash: The third is a hash of options. Within that hash of options should be a field called collection that is an array of values to place inside your select box.

For moreOptions see Ajax.InPlaceEditor

Examples

HTML

<p title="Click to edit" id="tobeedited">Click me, click me!</p>

Javascript

new Ajax.InPlaceCollectionEditor(

'tobeedited', 'ajax_inplaceeditor_result.php, {

collection: ['one','two','three']

});

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');