How to add event handler with Prototype new Element() constructor?

Question

I'm inserting an img tag into my document with the new Element constructor like this (this works just fine):

$('placeholder').insert(new Element("img", {id:'something', src:myImage}))

I would like to trigger a function when this image loads, but I can't figure out the correct syntax. I'm guess it's something like this (which doesn't work).

$('placeholder').insert(new Element("img", 
    {id:'something', src:myImage, onload:function(){alert("MOO")}}))

I'm hoping to do this in the same line of code and not to have to attach an event observer separately.

EDIT: The event needs to be registered when the element is created, not after. If the image loads before the event is attached, the event will never fire.

Why don't you want two lines of code? Surely that would make things more clear/readable? — mercutio
– mercutio, Commented Nov 10, 2008 at 20:20
Because if you insert the image in the first line, by the time you get to the second one it is too late to attach the event because the image has already loaded. The event needs to be attached when the element is created, not after. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Nov 10, 2008 at 21:35

ColinM · Accepted Answer · 2009-10-10 20:38:32Z

4

In this case, the best solution is to not use Prototype or at least not exclusively. This works:

var img = new Element('img',{id:'logo',alt:'Hooray!'});
img.onload = function(){ alert(this.alt); };
img.src = 'logo.jpg';

The key is setting the onload directly instead of letting Prototype's wrapper do it for you, and set the src last (actually not sure about that, but I do it last to be safe).

One-liners are overrated. With proper use of local variables the above is just as good. If you must have a one-liner, create a wrapper function or hack the Prototype core to ensure proper assignment (submit a patch!).

answered Oct 10, 2009 at 20:38

ColinM

14.1k4 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aron Rotteveel · Accepted Answer · 2008-11-10 20:04:37Z

2

Try

$('placeholder').insert(new Element("img", {
    id: 'something', 
    src:myImage
}).observe('load', function() {
    // onload code here
}));

answered Nov 10, 2008 at 20:04

Aron Rotteveel

83.4k17 gold badges106 silver badges129 bronze badges

1 Comment

Diodeus - James MacFarlane Over a year ago

That will not work because the observer is attached AFTER the element is created. The element loads before the event listener is working. The image would have to be pretty bit (I tested it) for this to work. Close though!

sblundy · Accepted Answer · 2008-11-10 20:03:04Z

0

You might have to move the function elsewhere and call it by name

$('placeholder').insert(new Element("img", 
    {id:'something', src:myImage, onload:"javascript:moo()"}))

function moo() {
    alert("MOO");
}

Of course, because insert returns the element, you could inline Element.observe

$('placeholder').insert(new Element("img", 
    {id:'something', src:myImage})).observe('load', function(){alert("MOO")});

answered Nov 10, 2008 at 20:03

sblundy

61.5k22 gold badges124 silver badges125 bronze badges

2 Comments

Diodeus - James MacFarlane Over a year ago

Why would I need onload:"javascript:moo()", the only thing thing that can go into onload IS Javascript.

Matt Kantor Over a year ago

This actually will work (see my answer below for reasons why). Don't downvote something until you try it. The "javascript:" prefix is totally unnecessary, though.

thoughtcrimes · Accepted Answer · 2008-12-04 01:05:55Z

0

The "onload" code shouldn't need to be wrapped up into an event handler. You are essentially loading the element right there, just put the code after the insert.

var img = new Element('img', {id: 'something', src:'myImage.jpg'});
$('placeholder').insert(img);
// Element has loaded! It can now be mucked around with.
// The onload code goes here...

answered Dec 4, 2008 at 1:05

thoughtcrimes

5165 silver badges11 bronze badges

Comments

Matt Kantor · Accepted Answer · 2008-12-12 16:11:43Z

0

It kind of sucks, but this is what you need to do:

$('placeholder').insert(new Element("img", {
    id:'something', src:myImage, onload:'alert("MOO")'
}));

The values in the attributes object just get inserted as strings, so when you do "onload: function() {...}" it turns into:

<img onload="function() {...}" />

Which doesn't actually execute the code inside the function, it just defines a new anonymous function that won't execute unless you tell it to.

If you wanted to be a ninja about it, you could do something like this:

var moo = function() { alert("MOO"); };
$('placeholder').insert(new Element("img", {
    id:'something', src:myImage, onload:'(' + moo + ')()'
}));

Or even:

$('placeholder').insert(new Element("img", {
    id:'something', src:myImage, onload:'(' + function() { alert("MOO"); } + ')()'
}));

While kind of crazy, those options give you the actual function object to work with in case you need it.

edited Dec 12, 2008 at 16:11

answered Dec 11, 2008 at 22:29

Matt Kantor

3,3243 gold badges28 silver badges47 bronze badges

1 Comment

Diodeus - James MacFarlane Over a year ago

$('placeholder').insert(new Element("img", { id:'something', src:myImage, onload:'(' + function() { alert("MOO"); } + ')()' })); -- this worked. Thanks!

Collectives™ on Stack Overflow

How to add event handler with Prototype new Element() constructor?

5 Answers 5

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest