Object.extend is your friend!
Here is an example. I made an IPE that takes a comma separated list.
When you click it, it becomes a vertical list of select boxes, each one
with a value from the comma separated list already selected. I''m sure
you can use the same method to extend IPE to create whatever form you
need. (Builder.node might come in handy as well). The important thing to
note here is how my initialize creates a normal IPE and then extends it.
This step may not be necessary for you and I don''t know that I did it
the best way possible, but it works. It may be that the only thing
you''ll need to extend (override) is the createEditField function and
the
disableEditField and enableEditField functions.
Cheers!
Colin
-----Code:
Ajax.InPlaceMultiSelectEditor = Class.create();
Object.extend(Ajax.InPlaceMultiSelectEditor.prototype,
Ajax.InPlaceEditor.prototype);
Object.extend(Ajax.InPlaceMultiSelectEditor.prototype, {
initialize: function(element, url, options) {
Object.extend(new Ajax.InPlaceEditor(element, url, Object.extend({
selectObject: false,
selectName: false,
minIndex: 0,
splitString: '', '',
emptyText: ''empty'',
addText: ''(+)'',
callback: function(form,value){
return Form.serialize(form);
}
}, options || {})), this);
},
createEditField: function() {
this.oldInnerHTML = this.getText();
this.options.textarea = false;
if(!this.options.selectName) this.options.selectName =
this.element.id || ''multiSelect'';
this.selectDiv =
Builder.node(''div'',{id:this.options.selectName+''-div''});
var addLink =
Builder.node(''a'',{href:''javascript:;''},[this.options.addText]);
addLink.onclick = this.addSelectToDiv.bind(this);
/*this.editField = */ var hidden =
Builder.node(''input'',{type:''hidden'',name:''selectName'',value:this.options.selectName});
//this.form.appendChild(this.editField);
this.form.appendChild(hidden);
this.form.appendChild(addLink);
this.form.appendChild(this.selectDiv);
var newSel;
if(this.options.loadTextURL){
this.selectDiv.innerHTML = this.options.loadingText;
this.loadExternalText();
}else{
var text = this.getText();
if(text != this.options.emptyText){
var opts = Array();
opts = $A(text.split(this.options.splitString));
opts.each(function(str){
newSel = this.addSelectToDiv();
selectText(newSel,str);
}.bind(this));
}else{
newSel = this.addSelectToDiv();
}
this.editField = newSel;
}
},
loadExternalText: function() {
Element.addClassName(this.form, this.options.loadingClassName);
this.disableEditField();
new Ajax.Request(
this.options.loadTextURL,
Object.extend({
asynchronous: true,
onComplete: this.onLoadedExternalText.bind(this)
}, this.options.ajaxOptions)
);
},
onLoadedExternalText: function(xhr, obj) {
Element.removeClassName(this.form, this.options.loadingClassName);
var newSel;
$A(obj).each(function(val){
newSel = this.addSelectToDiv();
selectValue(newSel,val);
});
this.editField = newSel;
this.enableEditField();
},
disableEditField: function(){Form.disable(this.form);},
enableEditField: function(){Form.enable(this.form);},
addSelectToDiv: function(id){
return addSelectToElement(this.selectDiv,
this.options.selectName, this.options.minIndex,
this.options.selectObject, id||null);
}
});
Michael Schuerig wrote:> I want to implement in-place editing for a hierarchical structure where
> the nodes are not simple text fields, but need to be represented by at
> least two input elements.
>
> The Rails helpers only support in-place editing for a text field,
> scriptaculous''s controls.js beyond that implements support for an
> in-place editor containing a select element. I need an editor where I
> essentially can define the form used for editing myself, either in the
> original document or loadable from a URL.
>
> Has anyone already done this? Otherwise I''ll have a go at it
myself.
>
> Michael
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---