CODEWITHSUNDEEP
javascripthtmlprototypejs
Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

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.

Upvotes: 0

Views: 9542

Answers (5)

ColinM
ColinM

Reputation: 13936

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!).

Upvotes: 4

Matt Kantor
Matt Kantor

Reputation: 1754

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.

Upvotes: 0

thoughtcrimes
thoughtcrimes

Reputation: 516

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...

Upvotes: 0

Aron Rotteveel
Aron Rotteveel

Reputation: 83173

Try

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

Upvotes: 2

sblundy
sblundy

Reputation: 61414

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")});

Upvotes: 0

Related Questions