I figured this out and wanted to post a followup sollution. I call
the new Object Ajax.InPlaceCollectionEditorMulti (mostly because I
didn't test if I could just overwrite the name
Ajax.InPlaceCollectionEditor). To get the multi select functionality
we override two methods from the Ajax.InPlaceCollectionEditor;
createEditField and buildOptionList.
This takes all the same options as Ajax.InPlaceCollectionEditor and
allow two additional options: multiple and selected. The object is
used as follows:
<code>
new Ajax.InPlaceCollectionEditorMulti(
<element_id>,
<submit_url>,
{collection:[[0, "zero"],[1,"one"],[2,"two"]],
multiple:true,
selected:[[0,''],[2,'']], // "zero" and "two" in the select list
will be selected.
ajaxOptions:{asynchronous:true, evalScripts:true}}
);
</code>
It should be noted that when using a multi select the form does not
like being a size of one, hence size=2 below.
<code>
Ajax.InPlaceCollectionEditorMulti = Class.create
(Ajax.InPlaceCollectionEditor, {
createEditField: function() {
var list = document.createElement('select');
list.name = this.options.paramName;
list.size = 1;
if (this.options.multiple) {
list.writeAttribute
('multiple');
list.size =
2;
}
this._controls.editor = list;
this._collection = this.options.collection ||
[];
if
(this.options.loadCollectionURL)
this.loadCollection
();
else
this.checkForExternalText();
this._form.appendChild
(this._controls.editor);
},
buildOptionList: function() {
this._form.removeClassName
(this.options.loadingClassName);
this._collection = this._collection.map(function(entry) {
return 2 === entry.length ? entry : [entry, entry].flatten
();
});
var marker = ('value' in this.options) ? this.options.value :
this._text;
var textFound = this._collection.any(function(entry)
{
return entry[0] ==
marker;
}.bind(this));
this._controls.editor.update
('');
var option;
this._collection.each(function(entry, index)
{
option = document.createElement
('option');
option.value = entry[0];
if (this.options.selected)
{
option.selected =
(entry[0] in this.options.selected) ? 1 :
0;
}
else {
option.selected = textFound ? entry[0] == marker : 0 == index;
}
option.appendChild(document.createTextNode(entry[1]));
this._controls.editor.appendChild(option);
}.bind(this));
this._controls.editor.disabled = false;
Field.scrollFreeActivate(this._controls.editor);
}
});
</code>
high 5 to all the developers, thanks for the lib! I would wake up
every morning dreading life if I had to program js without
script.aculo.us, prototype, and jquery.
On Oct 1, 3:56 pm, JoJo <[email protected]> wrote:
> Upon entering the page and clicking on an inPlaceEditor, I get the
> expected result: single line editing of a text field. I then click
> "ok" without even touching the text. My PHP script trims it and spits
> back the value. I then click to edit again, but now the box has become
> a 3 multi-line box. It has put \n\n\s in front of my text. On this
> second try, it has also failed to apply the CSS stylings that I
> specified.
>
> new Ajax.InPlaceEditor(
> 'imageTitle',
> 'script.php', {
> formClassName: 'formEditingTitle',
> cols: Prototype.Browser.WebKit ? 29 : 38
> }
> );
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
