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 <tokyot...@gmail.com> 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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to