InPlaceEditor / InPlaceCollectionEditor with checkboxes

[Andy Koch]

Hello,

I'm wondering if there is a best-practice method for using checkbox
items for the IPE or IPCE?

It seems like IPCE would be a better fit for this type of
functionality.

Currently I'm doing this...

onFormCustomization:function(ipe, ipeForm){
ipeForm.innerHTML = '<label><input type="checkbox" value="1"
name="'+parameter_name+'" />Bundle</label>';
}

... where I'm just trying to get the proof of concept work out,
eventually I'll need to have something that iterates through some pre-
detemined Hash or Array and creates a batch of checkboxes (checking
selected ones, of course).

But before I march on my merry way I'm wondering if anyone has already
developed a good solution for this case. I know I'm not the first one
to try this... but google has not turned up any helpful blog posts

Thanks for any help

[bbp]

Hi,

It won't help you, it's not at all the same thing. But I had the same
case and because of time and especially because I'm a very bad
developer I just extended IPCE to allow multiple select.

-----------------------------------------------------------
Ajax.MFInPlaceCollectionEditor =
Class.create(Ajax.InPlaceCollectionEditor, {
initialize: function($super, element, url, options) {
this._extraDefaultOptions =
Ajax.MFInPlaceCollectionEditor.DefaultOptions;
$super(element, url, options);
},

createEditField: function() {
var list = document.createElement('select');
list.name = this.options.paramName;
list.multiple = this.options.multiple || false;
this._controls.editor = list;
this._collection = this.options.collection || [];
list.size = (list.multiple) ? this.options.size ||
this._collection.length : 1;
if (this.options.loadCollectionURL)
this.loadCollection();
else
this.checkForExternalText();
this._form.appendChild(this._controls.editor);
},

buildOptionList: function() {
var re = (this.options.imageChecked && this.options.imageUnchecked)
? new RegExp(this.options.imageChecked +"|"+
this.options.imageUnchecked, "gi")
: undefined;
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];
option.selected = textFound ? entry[0] == marker : 0 == index;
option.selected = (typeof re!=undefined) ?
re.exec(marker)==this.options.imageChecked : 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);
}
});
-----------------------------------------------------------
to call it :
new Ajax.MFInPlaceInputCollectionEditor($elm.id, 'myPage', {
multiple: true,
size:3,
collection: obj.responseText.evalJSON(),
imageChecked : "checkboxon.gif",
imageUnchecked : "checkboxoff.gif",
callback: function(form, value) {
return {"v":value, "c":obj.responseText.evalJSON(), "t":
$elm.className};
}
});
-----------------------------------------------------------
with
multiple: true/false - false by default - simple or multiple select
size: int - collection.length by default - size of the select
imageChecked : string - undefined by default - image's name beacause I
use images to show checkbox status
imageUnchecked : string - undefined by default - image's name beacause
I use images to show checkbox status

It works for me I'm not sur it works everywhere.