Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

attachEvent problems

Status
Not open for further replies.
rcp032

rcp032

Technical User
Sep 21, 2006
44
US

I have some functionality I am trying to get to work in IE – basically populating an obj event handler with a function(param) call. I have this working in FF/Opera:

obj.setAttribute(“onLoad”,”function(param)”);

It simply does not work for IE. The literature I have found seems to suggest -attachEvent- as a suitable replacement, but I haven’t had any success. Well, they haven’t been very explicit in their examples so I am not sure what I am doing wrong, but finally it looks like -attachEvent- will not accept a param in the function. It only seems to accept a function name. Is that true? If so this is the syntax I mean to represent:

obj.attachEvent(“onLoad”, function);

If this is correct, can anyone suggest a way to “pass” a param? I am thinking my only option will be to set some global variable before I -attachEvent- and then get the param from the variable while inside function. Is there a better option or am I missing anything?
 
Sort by date Sort by votes
There are some doubtful statements out there. Can this demo illustrate the point?
[tt]
<html>
<head>
<script language="javascript">
function x(s,obj) {
alert(s+"\n"+obj.href)
}
function sethandler() {
var oelem=document.getElementById("btnid");
var param="abc";
var param2=document.getElementsByTagName("a")[0];

var oelem=document.getElementById("btnid");
if (window.attachEvent) {
oelem.attachEvent("onclick", function() {x(param, param2)});
} else if (window.addEventListener) {
oelem.addEventListener("click", function() {x(param, param2)}, true);
}
}
</script>
</head>
<body>
<button id="btnid">clickme</button><br />
<a href=" />
<button onclick="sethandler()">set clickme handler dynamically</button>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Sorry - I am kind of new to javascript - I can\'t seem to get that code to work and I can\'t figure out what may be wrong.

This snip demostrates exactly what I am doing. As I mentioned, it works in FF and Opera. I would like to do the same thing in IE.

--------------------------------------------------


<script language=\"javascript\">
function A ()
{
alert(\"Function A\")
}
function B (param)
{
document.getElementById(\"01_div\").setAttribute(\"onClick\",\"C(\'\"+param+\"\');\");
}
function C (param)
{
alert(param)
}
</script>

<div id=\"01_div\" onClick=\"A();B(\'This is not Function A\');\" style=\"height:100px; width:100px; background-color:#000000; position:absolute;\">
</div>

-----------------------------------------

Obviously then what this does is draw a black box. If you click on the box it alerts with function A and replaces the onClick handler with function C. Thus when clicked a 2nd time it alerts with function c.
 
Upvote 0 Downvote
ok - additionally, I can\'t figure out how to represent a double quote (\") or a single quote(\') in this forum - so they have to be fixed before the code will work.
 
Upvote 0 Downvote
Do you write other than programming in some ide?
 
Upvote 0 Downvote
I guess you are referring to the quote issue? I use dreamweaver, but I tried typing directly into the message dialog box as well with the same result.

I can\'t even write a contraction, because it hoses that up as well. In the preveiw before posting the result seems to be erratic and not exactly what will finally be displayed.

So let me post the code once again - having replaced the quotes in MSWord to see if that helps. They seem to use different quotes there.

----------------------------------------------------------

<script language=“javascript”>
function A ()
{
alert(“Function A”)
}
function B (param)
{
document.getElementById(“01_div”).setAttribute(“onClick”,”C(‘“+param+”’);”);
}
function C (param)
{
alert(param)
}
</script>

<div id=“01_div” onClick=“A();B(‘This is not Function A’);” style=“height:100px; width:100px; background-color:#000000; position:absolute”>
</div>
-------------------------------
 
Upvote 0 Downvote
I suppose that is a little better, but the single quotes blend in with the double quotes and turn out very bad.

Anyway - if you use global replace, its a 30 seond fix.
 
Upvote 0 Downvote
[tt]
function B (param)
{
//document.getElementById("01_div").setAttribute("onClick","C('"+param+"');");

var sparam=param;
var oelem=document.getElementById("01_div");
oelem.onclick=null;

if (window.attachEvent) {
oelem.attachEvent("onclick", function() {C(sparam)});
} else if (window.addEventListener) {
oelem.addEventListener("click", function() {C(sparam)}, true);
}
}
[/tt]
ps: Start an id with number is not a good idea.
 
Upvote 0 Downvote
Haha - ok great thats a start, but it causes serious problems. Its not replacing the old handler, its just adding new ones.

Every time you click, you get a new handler and soon you have 3 or 5 alerts.
 
Upvote 0 Downvote
>Every time you click, you get a new handler and soon you have 3 or 5 alerts.
I cannot confirm that.
 
Upvote 0 Downvote
Thats what it does for me on both IE and FF. I did comment out one line though:

oelem. />

just looked like a typo to me does that do something?
 
Upvote 0 Downvote
I tried it in Opera as well. The original handler remains and every time you click the DIV. a new handler is added. The number of alerts you get corrisponds directly to the number of times you have clicked the DIV previously.
 
Upvote 0 Downvote
>oelem. />
Where is it? Don't response until you verify your statement.
 
Upvote 0 Downvote
this is the code I am using now in function B. Its adds new handlers but leaves the old one(s)

function B (param)
{
//document.getElementById(\"01_div\").setAttribute(\"onClick\",\"C(\'\"+param+\"\');\");
var sparam=param;
var oelem=document.getElementById(\"01_div\");
// oelem. />
if (window.attachEvent) {
oelem.attachEvent(\"onclick\", function() {C(sparam)});
} else if (window.addEventListener) {
oelem.addEventListener(\"click\", function() {C(sparam)}, true);
}
}
 
Upvote 0 Downvote
>in the code you posted, line 7
Non sense. Can you read?

Also what you are now having misses some essential line/idea reflected in what I posted.
 
Upvote 0 Downvote

OK - I figured it out, the proxy I am using is jumbling things up - esp the line which deleted the old handler. It also the reason my quotes are messed up.

Got it all working now - thnx!
 
Upvote 0 Downvote
Well ok I am back.

Unfortunately, in order to make things simple, I used onclick in my example, however in my actual code I am using onload.

I have tried to delete the existing or previous onload handlers using your method with both obj.load and an obj.onload and I can\'t seem to delete the old handlers again.

Is there some special case for the onload handler that makes it different from onclick?

I can post some code that better illistrates exactly what I am doing if that would help. Unfortunately still with the limitation of messed up quotes unless I can find a different proxy.
 
Upvote 0 Downvote
aiight - so once again I have created a demo that shows more closely what I am trying to do. It has both the code in it that works on FF/Opera and the code that kinda works on IE - that stuburnly refuses to delete the old even handlers.

I have also included debug code which makes the proper operation and the problematic operation rather easy to see. Also, i think I have my proxy issue fixed. So the links to images are current, so you can cut and paste the code freely and expect it to function as I have described.

Code: 
<a onClick="swapImageStart(0);" href="javascript://"><div id="div_01">Working FF/Opera Next Photo</div></a>
<a onClick="swapImageStart(1);" href="javascript://"><div id="div_02">Not really working Next Photo for IE/FF/Opera</div></a>
<div id="div_03" style="position:absolute; visibility:visible; top:50px; left:150px; "><strong>Loading Photo</strong></div>

<div id="div_04" style="position:absolute; visibility:hidden; top:100px; left:150px; ">
<img id="img_01" src="[URL unfurl="true"]http://img.photobucket.com/albums/v239/riluve/PC1.gif"[/URL] border="0" alt="Pic 01">
</div>

<script language="javascript">
var imgs = new Object(); // Hold info on images
imgs.Ndex = 0; // point to current image
imgs.names = new Array("PC1.gif","AMD1.gif","AMD2.gif") // image file names
var img_01_obj = document.getElementById("img_01");  //init img object
var div_03_obj = document.getElementById("div_03");  //init div object

window.onload = function() 
{
swapImageEnd ();
}
//------------------------------------------------------
function swapImageStart(arg0)
{
if(imgs.Ndex == imgs.names.length) imgs.Ndex = 0;
img_01_obj.style.visibility = "hidden"; //turn off image
div_03_obj.style.visibility = "visible"; //turn on loading message

if (arg0)// proper way to attach/replace events
{
	img_01_obj.onload=null;
	img_01_obj.load=null;
	if (window.attachEvent)
	{
		img_01_obj.attachEvent("onload", function() {swapImageEnd(imgs.Ndex)});
	}
	else if (window.addEventListener)
	{
		img_01_obj.addEventListener("load", function() {swapImageEnd(imgs.Ndex)}, true);
	}
	img_01_obj.setAttribute("onLoad", "swapImageEnd('+imgs.Ndex+')");

	var d01 = document.createElement("div");
	d01.appendChild(document.createTextNode("-bad set trigger-"));
	document.body.appendChild(d01);
}
else // working events attached for FF/Opera
{
	img_01_obj.setAttribute("onLoad", "swapImageEnd('+imgs.Ndex+')");
	
	var d01 = document.createElement("div");
	d01.appendChild(document.createTextNode("-good set trigger-"));
	document.body.appendChild(d01);   
}
// change source for image - when image finishes loading
//it should trigger the onload event which is swapImageEnd()
setTimeout('img_01_obj.setAttribute("src", "[URL unfurl="true"]http://img.photobucket.com/albums/v239/riluve/'+imgs.names[/URL][img].Ndex[/img]+'");',500);
}
//------------------------------------------------------
function swapImageEnd () //event triggered when new image is loaded
{
var d01 = document.createElement("div");
d01.appendChild(document.createTextNode("-trigger run-"));
document.body.appendChild(d01);   
img_01_obj.style.visibility = "visible"; //turn on image
div_03_obj.style.visibility = "hidden";  //turn off loading message
imgs.Ndex=imgs.Ndex+1; //set index to next image
}
//------------------------------------------------------
</script>

When the first link is used - under FF/Opera - it works exactly how I need the function to work. If you use the 2nd link it does the "proper way" which actually doesn't work to well - a new handler will be appearnt every time it is called.
 
Upvote 0 Downvote
humm - maybe it is time to start fresh with a new thread though. Its kind of a new problem now.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
146
feherke
feherke
Ramones1986
  • Locked
  • Question
Problems with a simple Object Oriented Code - Result not Showing Up
Replies
3
Views
64
jpadie
jpadie
1DMF
  • Locked
  • Question
Problems with loadJSON / JSON 2
Replies
10
Views
98
1DMF
1DMF
zura
  • Locked
  • Question
Ajax problems in chrome
Replies
5
Views
60
jpadie
jpadie
markronz
  • Locked
  • Question
Problems passing variables to javascript 1
Replies
2
Views
68
markronz
markronz

Part and Inventory Search

Sponsor

Back
Top