Prototype invoking insert

[Deadelus]

Hello everyone,

I've tried searching for this but couldn't find anything that matched
this.

I would like to invoke() the insert() method on an element and insert
a link at the end of every fieldset on my page.

This is my code:

$$('form.form fieldset').invoke('insert',
new Element('a',{ href: '#' })
.update('advanced')
.observe('click', function(event) {
this.up('form.form').toggleClassName('simple');
})
);

What happends is that the link is only inserted at the last fieldset
of my page.

Also when I create the link first like:
var link = new Element(...);
and then:
$$('form.form fieldset').invoke('insert',link);
The same thing happends, only the last fieldset gets a link.

Am i really forced to use each() like this?
$$('form.form fieldset').each(function(fieldset) {
fieldset.insert(new Element(...).update(...).observe(...);
}

I really hope you can tell me what I am doing wrong because I really
want to make the code as good as possible.

Thanks in advance,
Johan

[jdalton]

Hiya Johan.

The reason your code is not working is because you are passing it a
single (one) anchor element reference.
So it appends it to each fieldset, which would remove it from the
previously set fieldset.

If you did:

$$('form fieldset').invoke('insert', '<a href="#">advanced</
a>').pluck('lastChild').invoke('observe', 'click', function(event) {
this.up('form').toggleClassName('simple');
});


It would work because you are creating a new anchor element for each
iteration.
This may clean but it does require 3 iterations instead of 1 (note the
2 uses of invoke and 1 pluck).

this one uses only 1 iteration:
$$('form fieldset').each(function(element){
element.insert( new Element('a',{ href: '#' })

.update('advanced')
.observe('click', function(event) {

this.up('form').toggleClassName('simple')
)
});

OR (my fav)

$$('form fieldset').each(function(element){
element.insert('<a href="#">advanced</
a>').lastChild.observe('click', function(event) {
this.up('form').toggleClassName('simple')
})
});



-JDD

[Deadelus]

Ah i see! never thought of that. I'll update my code with the 1
iteration code.

Thanx!

[kangax]

How about taking advantage of toElement (making insert act like a
factory):

$$('form.form fieldset').invoke('insert', {
toElement: function() {
return new Element('a').update('advanced')
.observe('click', function() {
this.up('form.form').toggleClassName('simple')
})
}
})

- kangax

[jdalton]

+1 Kangax, I never ever thought of that.... thats really cool, and
under utilized.

[Deadelus]

1 word: WOW!

I agree with jdalton i've never used that.

Thanx!