Getting and manipulating object names or references as strings... HOW???!!!

[krycek]

Hi all!

I have a big, big, problem! I need to find the actual name of an object which is being passed by reference - like, how?

Ok, here is what I am trying to do. I have some custom dynamic layers that I have built, based on DIVs. Now, I need to make these draggable, so I use mouse events etc. etc. etc.

This lets me play with the event.srcElement. Now, that works fine providing I only manipulate the original object, i.e. the actual DIV. Because, it is the DIV that is the srcElement.

The problem arises when I try to say, only drag if the .draggable property is true. Hmmmmm.... some of you may see my problem already, I need to find the .draggable property of the custom object which is based around the DIV which is generating the event.

Tricky!

Let's say my div is called divMyLayer. (This is not included in the original html file btw, it is created dynamically.) So, I then use a constructor function to refer to it as myLayer. From now on, everything I do to my DIV will be done through the new object I have created, with all its new properties and methods etc. etc. etc.

But, HOW do I do this in my example? I have tried converting the object reference to a string (fat chance!) by using toString() etc. but although it is an easy matter to eval() a string into a reference, I cannot find out how to do the reverse!

This is really buggin me and has held me up for two days now. Searching the net and reading loads of stuff has not helped at all. By the way, I cannot access the DIV name by using .name or anything like that, unless I am doing it wrong...?

Any help at all would be appreciated! :)

::] krycek [::

[beetle]

Wow...wordy :D

How are you adding it dynamically? Are you are using node.appendChild(objectToInsert)? If you are, the appendChild() method has a return value too, which gives a reference to the object just appended. Like this...var o = document.createElement("DIV");
var myDiv = document.body.appendChild(o);The var myDiv is reference to that inserted DIV, just as if we had used document.getElementById() (assuming we knew it's ID, of course)

Am I close?

[krycek]

Um... I don't think so... I'm not really sure...

I don't really work with all that node stuff, I know maybe I should but I never really got into that.

My way is simply to add a DIV tag to the document using document.body.insertAdjacentHTML("BeforeEnd", html) and then adding a custom object to tha and prototyping my values and methods onto that.

Problem is, I cannot access the name of the object in order to work out which custom object should be looked at - are you with me so far? :S

I can do this by passing a few extra values and storing them in an array but it seems a bit messy... surely there must be some way that I can simply find the string version of the object name?

e.g. if I want to create an object reference to myObject, then I can do this:

objRef = eval("myObject")

but how do I do the reverse? i.e. get "myObject" back out of the object reference.

Thanks for your help by the the way, beetle, and anything else you or anyone else could throw my way will be greatly appreciated :)

::] krycek [::

[beetle]

Ok, when you say 'object name', exactly to what are you referring? like this?

<div name="myDiv"></div>

And let's say a variable o contains a reference to that DIV. You want the name? Like?

var objName = o.name;

??? I'm a bit confused, I admit. Perhaps you could show me some code instead of just explanations....I'm getting a bit lost in the language...

[krycek]

well, I must admit I started off with o.name but that just returns "undefined", even though I have set both id and name in the DIV tag. I think perhaps that because the DIVs are written by the JavaScript, that they are not working the same somehow - but I can't see why...?

well, I'll step through the basics of my code. First I create a layer by essentially writing the div as a string, to the document, using insertAdjacentHTML.

document.body.insertAdjacentHTML("BeforeEnd", "<div id='myObject' name='myObject' style='blah blah blah'>content</div>")

I have a function to do that, but the result is the same.

Now, let's skip the code for the drag and mouse events etc. - all we really need to know is that there is a mouse event, say mouse down for example, and that is captured, giving the following:

event

To find the layer which generated the event, I look at the source element:

event.srcElement

This is a reference to the DIV, so there is no trouble. All this works perfectly, and I can drag drop etc. etc. etc.

BUT - I use my own dynamic layers which are basically a collection of functions/methods and properties, added to the original using a constructor function, e.g.

function dynamicLayer() {
this.draggable = true
}

dynamicLayer.prototype.myMethod = function() {}

in the very much abbreviated example above, you can see that once I have created my function and attached it to the DIV, I can add properties and methods. I attach it to the DIV by saying,

myDynamicLayer = new dynamicLayer("myLayer")

the code in my function deals with assigning the object etc. etc. etc. but the point is that now I can manipulate myLayer by manipulating myDynamicLayer. Now, there is no way for me to specify that the original DIV has a property .draggable; I mean, I cannot say,

myLayer.draggable

but I can say

myDynamicLayer.draggable

I hope you are starting to see the problem. The mouse event will only apply to the original DIV, that is, myLayer. So, the event.srcElement will always be, myLayer.

However, when using more than one layer, how do I know which one it is? Um, I don't. There is no way that I have found that enables me to convert the object reference found in event.srcElement to a string!!!

I have tried event.srcElement.name (equivalent to your o.name example) and many other methods, none of which work. I need to know the string version of the original object name so that I can check if I have allowed it to be draggable.

Now, I can accomplish this in other ways such as assigning a certain class, such as, class="drag" etc. but that is messy! Not to mention bad procedure. Also I can create a global array to keep track of associations between original layer names and dynamic layer names, and do a search between them - but that strikes me as unneccessarily complicated!

At the end of it all, my example above is purely to give some insight into what I am trying to do - DON'T get too caught up in it! :) The task remains to convert an object reference to a string name that I can play with.

Once again;

String ---> Object Reference =

objRef = eval(string)

OR

objRef = eval("myLayer")

That converts a string name into a reference. I want to do it the other way round;

Object Reference ---> String =

???????????? :confused::confused::confused:

I wish I could simply do myLayer.name! But it returns "undefined" so I can't :(

Any help would be much appreciated, as this is really, really annoying! :mad:

::] krycek [::

[beetle]

Well, your whole problem is centered around the fact that you write your DIVs to the page as strings of HTML. In doing that, the DOM doesn't see them, they just get rendered to the page. That's why you get 'undefined' when accessing the name attribute. Besides, as you can see here (http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp), it's an IE-only method anyhow. Likewise, srcElement is IE only (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/srcelement.asp) as well...NS uses target (http://www.mozilla.org/docs/dom/domref/dom_event_ref.html#999092) instead. What browsers are you attempting to satisfy?

2nd, brush up on real DOM methods for adding HTMLelements to a page. Visit the DOM scripting (http://codingforums.com/forumdisplay.php?s=&forumid=15) forum and poke around in the posts. The concept I outlined in my first post will make it MUCH easier for you to build an array of references (better than storing the names as strings) so you can do your prototyping and such from there. For a javascript programmer who has a grasp on protoyping and OO stuff such as yourself, needs to be familiar with DOM scripting, and s**tcan the IE stuff.

[joh6nn]

long thread for only 6 posts.

krycek, most HTML elements aren't allowed a name attribute. links, form elements, images, and a few others are allowed, but not divs. in general, just assume that everything that's not a form, can't have a name. you'll have an easier time of things.

this leaves us stuck, however, with no way to get a hold of things. that's why we have the id attribute. in NS4, you used document.layers[id] to get a hold of an object, in IE4 it was documetn.all[id]. now, the crossbrowser version is document.getElementById(id). once you've gotten an object, if you want to find out what it's id is, you just ask:

alert(unknownObject.id);

hope that's what you were looking for.

[beetle]

Good call joh6nn. I didn't realize it while examining the situation, but I cannot think of 1 time in the past where I've tried to give a DIV a 'name'.

wonder why I tried to now? :rolleyes:

[krycek]

Joh6nn, thanks! :)

I tried to use the .id thing, but again it didn;t work. So, I wrote a long post, then I wrote an example script - tested it first... and it worked! :o

So, I went back to my original script, changed a couple of things and the .id method worked! Excellent! So, I can now do what I wanted with no problems :)

Thanks beetle for your help also, but I think maybe I confused the issue by trying to give too much background info.

Cheers guys! :D

::] krycek [::