Refer to an object in link

[cangoou]

Hello!

I have an object from a 3rd-party library. I'm using a function like:

function addHtml(object)
{ object.html += '<a href="javascript:void(0)" onclick="object.close();">Close Object</a>';
}

It adds some html to the objects html (which is displayed later). The problem of course is that object.close(); will not work, because object is just a local variable in my function and not known globally. In fact there can be many of these objects, so I cannot put the object just in a global variable.

So how can I add a reference to the object in my onclick?

[broniusm]

In your snippet above, object needn't be a global variable. Expand your example with how you are calling addHtml-- you ought to be able to pass an object reference so that "object" in your snippet above is dealing only with that single instance.

[cangoou]

Thanks for your reply. I'm not sure I understand you. The snipped above works so far without error. The problem is that the html of object.html is written somewhere in the DOM-Tree, where "object" is not know anymore. So the problem doesn't occur before someone clicks on "Close Object"-link, onclick is execute and object is not defined.

[broniusm]

Oh, ok, I understand. It might help to send a little more (like what ".close()" does), but I think the solution might be in using a javascript closure:

... onclick="object.close();" ...

becomes

... onclick="function(){object.close();}" ...

Or maybe it should be:

... onclick=function(){object.close();} ...

or something along those lines.. Read up on javascript closures, and I think you will find your solution there. Holler back, so we don't mislead anyone in the future :D

[cangoou]

Thanks again for your help. The object are small tooltip-windows, I just want to add a close-button to them.

I read a bit about javascript closures and the use of "this"-pointers, and I think your solution unfortunatly
could only work if you use something like:

link.onclick = function(){object.close};

But i couldn't use that because the tooltip ist not yet defined, so I can't get a DOM-Object of my link.

But in inline event registration, it doesn't seem possible. I tried all your solutions but always gets "syntax error" on clicking.

[broniusm]

Ok, an oversight on my part was that your js snippet is populating only a custom property .html on this object in an array of objects; the rendering of that .html value is done some other time.

Can you share the snippet that renders/inserts the .html value? Also, can you share more info about .close() and what it does and how it ought to be called currently?

[astupidname]

I read a bit about javascript closures and the use of "this"-pointers, and I think your solution unfortunatly
could only work if you use something like:

link.onclick = function(){object.close};

But i couldn't use that because the tooltip ist not yet defined, so I can't get a DOM-Object of my link.

But in inline event registration, it doesn't seem possible. I tried all your solutions but always gets "syntax error" on clicking.

That would be correct. The problem you are having is that the only reference you can make when setting an onclick via a string is 'this' which will refer to the current object only, in this case the link that is being added. To be able to properly set a reference in an onclick requires either hard-coding the name of the object (terrible idea) or setting the onclick to a DOM created element. You solution should be along the lines of:

function addHtml(object) {
var link = document.createElement('a');
link.href="#";
link.innerHTML = "Close Object";
link.onclick = function () { object.close(); };
object.appendChild(link);
}

It's also possible you could maybe get away with using: "this.parentNode.close();" when setting via string instead, as the links parent node is what the link is being added to.

[astupidname]

I forgot, also, you will want to return false in the links onclick:

link.onclick = function () { object.close(); return false; };

[cangoou]

Thanks again for your help.

That would be correct. The problem you are having is that the only reference you can make when setting an onclick via a string is 'this' which will refer to the current object only, in this case the link that is being added.

Right.

Unfortunatly, this.parentNode gives a DOM-object and not a Javascript-object, on which I have to call the method. And I couldn't find a way to translate one into the other.

Can you share the snippet that renders/inserts the .html value? Also, can you share more info about .close() and what it does and how it ought to be called currently?

Unfortunalty, I cannot really look into the src of the 3rd-party-tool: It's a google maps marker-object, and the code is obfuscated.

[broniusm]

Is it as simple as closeInfoWindow()
[code.google.com...]
?

[cangoou]

Yeah - but I need it on a GMarker, not on the GMap2. Try to refer to a GMarker in your own link when you got plenty of them.

[broniusm]

ok, I'm tapped ;)
You might take your very gmap-ish question to one of the gmap developers groups... Would be good to close the gap back here on your return.

[cangoou]

Thanks again anyway for your replys! I thought it as a more general js-problem, so thats why I posted it here, but I will try it in a google-groups and get back here if I get an answer.