Wednesday, July 19, 2006

IE cannot set events via the DOM in order to pass parameters to functions/methods

Not one of the following examples will work in IE:

anchor.setAttribute('onclick', 'doThis(' + param + ');');
anchor.onclick = 'doThis(' + param + ');';
anchor.onclick = new Function('doThis(' + param + ');');
anchor.onclick = function() { doThis(param); };
anchor['onclick'] = 'doThis(' + param + ');';
anchor['onclick'] = new Function('doThis(' + param + ');');
anchor['onclick'] = function() { doThis(param); };


If I want to dynamically write out a list of links, I have to fucking spell out the entire string rather than using DOM methods and then innerHTML my way to working code, or stick javascript:void(...); into the href. I can't define event handlers without some serious hacked-out solution, because I need to pass a parameter when it gets called.

Edited 3/5 to add: rather than post yet another comment in reply to yet another anonymous comment...any of the above will work in IE, provided you call anchor.parentNode.innerHTML = anchor.parentNode.innerHTML afterward. Yes, you must tell IE explicitly to listen to the markup contained in the page that it already knows about.

Labels: ,

39 Comments:

Anonymous Anonymous said...

LMAO I just spent the last 4 freaking hours on this one. All you have to do is find out what the parent node of the added objects are.. then simply:

YOURparentNode.innerHTML = YOURparentNode.innerHTML;

I seriously want to throw a rock at someone.

9:10 AM  
Anonymous Anonymous said...

same problem guys. i reckon a rock is not good enough. perhaps an ICBM would do the trick.

8:34 PM  
Blogger The Hater said...

I think an ICBM would cause too much devestation. We need something with about that range (read: can hit Redmond from here), but with wider-spread, lighter impact.

Something like a rubber nuclear weapon - that would sort it. Like giving half the IE users a nasty kick in ass all at once.

10:04 AM  
Anonymous Anonymous said...

Wel FFS i just also spent the last 4 hours on this one. Grrr why the **** does microsoft do this.

what a bunch of BS.

Thanks guys,

i searched all over the internet (well actually that's not true and there's no way to know) but i found my answer here.

9:46 AM  
Blogger The Hater said...

"Wel FFS i just also spent the last 4 hours on this one. Grrr why the **** does microsoft do this."

You can fucking curse here, I promise I won't let it offend me.

"i searched all over the internet (well actually that's not true and there's no way to know) but i found my answer here."

It makes me happy to know that this at least helped someone out! Along with having the fun of an endless bitch-fest at Microsoft's expense, I have every intention of helping developers and designers work around the bugs in IE.

11:22 AM  
Blogger The Hater said...

"myElement.onclick = function() { var temp = new Function("doStuff('"+id+"')"); temp(); };"

Interesting. I've seen the same sort of impementation before, but with IE's eagerness to leak memory all over the floor with setups like that, I'd want to profile that fucker for a while before I trusted it to work solidly in production. Let me know if you beat me to it, though.

2:17 PM  
Blogger Unknown said...

Profile it? For what purpose?

The moment you open IE, you might as well drown your computer in a tub of motor oil. IE itself renders your machine absolutely useless.

I used it in my latest project. It's no worse than any other memory leak (for either Firefox or IE) and is also useful if you're using Ajax.

I hope the code snippet helps you/others somewhat...it's been a little while since i last looked at what i did, so i can't remember now where the "id" variable came from. as long as it's a local var, it should be fine.

7:56 AM  
Anonymous Anonymous said...

I'm going crazy. will someone please tell me what the IE-safe version of


newAnchor.setAttribute("onclick","setDateField(document.sweepsRequest.pullStartDate" + pullStartDateCount +")\;top.newWin = window.open('calendar.html', 'cal', 'dependent=yes, width=210, height=230, screenX=200, screenY=300, titlebar=yes')");


is???

7:38 PM  
Blogger Unknown said...

newAnchor anonymous:

i can see already two mistakes in your code and i haven't even got past the first line.

but i agree with the guy above ^^^

11:56 AM  
Blogger Unknown said...

The Problem
-----------
newAnchor.setAttribute("onclick"...

This syntax does not work in IE. Try this, for example:

blah.setAttribute('class','myCSS');

That won't work either. IE has a totally different syntax, so everywhere you have to do fucked up shit like this:

blah.setAttribute('class','myCSS');
blah.className = 'myCSS';


The Solution
------------
// I think this works--it's been a while, but if you're not passing arguments, you type the function as a string.

blah.onclick = "myfunction()";

// Otherwise, if you're passing arguments, you'll have to do it the way I do it, shown in previous comments.

blah.onclick = function() { var temp = new Function("dostuff('"+myvar+"')"); temp(); }

12:06 PM  
Blogger The Hater said...

Thanks, yraen.

Fuck, I don't have to follow up much at all, do I?

4:23 PM  
Blogger Unknown said...

lol, anonymity is annoying. It's just silly when they want your help, they don't even want to tell you who they are.

anyway, it's as bad as writing about a particular topic--such as artificial neural networks--and some anon punk-ass wants you to write his entire university project for him because he can't figure it out for himself.

12:09 PM  
Blogger Unknown said...

actually, no. i have no knowledge at all about neural networks--one day i just got curious and had a browse around, thinking about how people do it.

some dude put up this cool kind of tutorial--it was a php/mysql based thingy--and it had this comments area at the bottom.

about one third of the comments were, "can you do x y z for me, i need it done for an assignment"

some of them were anonymous...and it just rubbed me up the wrong way.

2:37 PM  
Anonymous Anonymous said...

OK but how do I add an event in the loop for example
var div = document.getElementById ("cont");
(for var i =0; i<5;i++)
{
var elem =document.createElement ("li");
elem.setAttribute ('onclick', showP(i);) //does not work for IE
elem.onclick = function() {var x = new Function (showP(i)); x(); };//always references the last number (4);
div.appendChild(elem);
}
So is there any solutions

11:13 AM  
Anonymous Anonymous said...

Hi guys,
why using this declaration:

blah.onclick = function() { var temp = new Function("dostuff('"+myvar+"')"); temp(); }

when we can simply with a shortest:

blah.onclick = function() { myFunction(); }

"myFunction()" must be a declared function.

Soon,
Giuseppe Leone

5:07 AM  
Blogger Unknown said...

Anonymous #2, you can only do that if you're not passing myFunction any arguments.

Anonymous #1
OK but how do I add an event in the loop for example

for IE, it's a good question, and I don't know. it's why this blog exists!

10:01 AM  
Blogger Unknown said...

Anonymous #2:
actually I take that back as I was wrong. I'm using Ajax to do something a bit different.

Sadly it doesn't help Anonymous #1 with his problem, and i'm stumped too. My only suggestion is to try a different way to do whatever it is you are doing (I know, it sux goats, but i've had to do it myself a few times)

10:11 AM  
Anonymous Anonymous said...

I spent days... DAYS on this unbelievable example of IE stupidity. I ended up redesigning EXTRA "buttons" on the page and swapping their display property after IE failed time and again to accept any adjustment to the onclick attribute (as I had originally coded it, before beginning testing with Inept Excrement).

Thank you. Thank you for the solution - I wish someone had syndicated this page so that I might have found it sooner!

8:02 PM  
Blogger Michael said...

Thank you for your post... I can't say how frustrated I was at IE (everything worked in Firefox, Safari and Opera!).. but the innerHTML trick worked.. much appreciated!

12:12 PM  
Anonymous Anonymous said...

I solved this problem of dynamically creating imagemap in a loop by using the event object.
//AREA CREATION
area.onclick = selectComponentFromMapForIE; area.setAttribute("id", value); boxMap.areas[index] = area;

//Event Handler
var area = window.event.srcElement;
value = area.getAttribute('id');

Basically set attributes of area and get it in the handler. This may not be the ideal solution but still it solves the purpose

2:56 AM  
Blogger Vinay Nihalani said...

I also spent fucking 6 hrs on this onclick issue.
Searched most of the JS pages on Internet...but solution was found in ur blog.Thks.

Hope this blog will b alive as long as Fucking IE is alive.

4:15 AM  
Anonymous Anonymous said...

I FOUND THE SOLUTION TO THIS PROBLEM!!!!!

I have been searching to the solution as well.. And it was hard to pass through the id of an element.
When you got the following code:


for(i=0;i<=20;i++){
var elem=
document.createElement('DIV');
elem.id=i;
elem.onclick=function(){
myFunc(this);
}
}

function myFunc(that){
var that_id=that.id;
alert('Id of the clicked element: '+that_id);
}


Very simple solution, but it is effective, and if the id may not have the i number, just use src or innerHTML with text what has a transparent color or whatever..

any questions? Don't send message here, I don't use this forum much, mail me: jeti2121@hotmail.com

5:33 AM  
Anonymous Anonymous said...

When I am trying to open a photo on my page I get Internet Explorer can not open this page. Anyone else getting this? Something must be going on..

1:27 AM  
Anonymous Anonymous said...

Dammit I hate IE. I dont understand why it still is the "corporate safe choice" for many places.

It is only a safe headache for developers.

1:13 PM  
Blogger Unknown said...

Guys, I'm also a victim of this f.ck*n ie crap and in case there are still ones who are looking for a solution to this problem, I've found something here:

http://www.thescripts.com/forum/thread468483.html

All you have to do is,

anchor.onclick = new Function( "anotherFunction( '" + myParameter + "' );" );

1:50 AM  
Blogger Xapp said...

Create a clickable div:

var div = document.getElementsByTagName("div")[0];
var linkParent = document.createElement("div");

var link = document.createElement("div");
link.setAttribute('onClick', "javascript:alert('clicked');");
link.innerHTML = 'Click Me';

linkParent.appendChild(link);

div.innerHTML = linkParent.innerHTML;

9:49 AM  
Anonymous Anonymous said...

var domAnchor = document.createElement( "<A href='#' Name='x' onclick=\"alert('hello world'));return false;\" title=\"A test alert method\">click me</A>" );

This solution works

unbelievable that it would be so vastly different than how it is done through the dom.

I truly despise IE.
ubba1987

10:15 AM  
Blogger Nithin Kumar Padavu said...

Thanks Guys Thanks a lot. You ppl just saved me from going mad. I've been trying to do this all evening. 5 hours.

and how the hell did someone figure this out...

myElement.onclick = function() { var temp = new Function("doStuff('"+id+"')"); temp(); };

who the hell dreamt somehting like that. i would never have. Thanks a lot for every one.

12:34 PM  
Blogger Unknown said...

hi, guys, if you using obj.onclick = function{your_function();} have many disadvantages:
1 the DOM structure will not as same between IE and Firefox.
2 if you clone it, the function will gone

4:34 AM  
Blogger Charlie Thompson said...

This comment has been removed by the author.

3:08 PM  
Blogger Charlie Thompson said...

OMG, thank you! I didn't want to write a special function just to add an onclick!

I NEVER would have thought to add parentNode.innerHTML = parentNode.innerHTML

3:10 PM  
Anonymous Anonymous said...

If I may revive this issue a year and a half later (Dec 07):


Is it possible to do this with the W3 DOM instead of innerHTML?

8:57 AM  
Anonymous Anonymous said...

I'm referring to the approach summarized in the blog post addendum:

anchor.parentNode.innerHTML = anchor.parentNode.innerHTML


I'm not sure if any of the other suggestions in the comments actually work -- or are W3 DOM...

9:05 AM  
Anonymous Anonymous said...

IE sucks a lot - if not for all these helpful blogs explaining how to make stuff work in IE I would be spending a weekend at work.

10:11 AM  
Anonymous Anonymous said...

Thanks a lot Serhan, that code worked pretty well for me !!!

[serhan]
anchor.onclick = new Function( "anotherFunction( '" + myParameter + "' );" );
[/serhan]

Its amazing how the IE is retard !!

8:53 AM  
Blogger The Enlightened One said...

Hey I was looking for this. I am new to DOM and started out with firefox's model and it was very good. unfortunately it didn't work in IE. Infact lots of other shit doesn't work. I am not sure even parentNode property works...could you check that. I gave up on IE...I'll just use some software to get it changed over.
There's s/t con sense that claims to do this porting.

Anyways, IE sucks bigtime. I don't see the fucking reason why some people LOVE IE. The only thing I use IE for is downloading firefox when I reinstall my OS

12:22 AM  
Anonymous Anonymous said...

i have found this to work in IE:

myElement.onclick = function () { myFunc( row.getAttribute('id')) };

where row is a predefined table row. I needed a table row removed onclick.

3:56 AM  
Anonymous Anonymous said...

Hello,

The only way I can get event functions to work on generated elements in IE, is by using this code snippit:

var appendEvent = function () {
if (window.addEventListener) {
return function (el, type, fn) {
if (typeof el === 'string') {
document.getElementById(el).addEventListener(type, fn, false);
} else {
el.addEventListener(type, fn, false);
}
};
} else if (window.attachEvent) {
return function (el, type, fn) {
var f = function () {
fn.call(((typeof el === 'string')?document.getElementById(el):el), window.event);
};
if (typeof el === 'string') {
document.getElementById(el).attachEvent('on' + type, f);
} else {
el.attachEvent('on' + type, f);
}
};
}
}();

I append the event like:
appendEvent(newElement,'click', function () {alert(myParameter)});

8:51 AM  
Blogger The Brown's said...

This did it for me. Thanks a ton... I was setting oncick on an img

anchor.onclick = new Function( "anotherFunction( '" + myParameter + "' );" );

11:52 PM  

Post a Comment

<< Home