JavaScript newbie: Need help in working with objects

[paragpdoke]

Hello Everyone. Merry Christmas to all !
I'm a JavaScript newbie (and new to thescripts.com too). And I have problems in working with objects in JavaScript.

The problem:

[HTML]<a href="javascript:functionName(object);">Click me</a>[/HTML]
Somehow it calls toString for the object and rather than it being processed as an object, it is processed as a string.

Details:
I'm trying to build a documentation UI (using VBA plugin mztools) and the objects I work with are Project, File, Procedure in that order. The Procedure in turn has arrays of Comments and Parameters.

function File(Name,Files) {
    this.Name=Name;
    this.Files=Files
}
function File(some arguments....,Procedures) {
    // The usual this statements...
}

Some similar declarations for Procedure, and other objects.
I'm able to build a library (not sure if the term is correct) of objects where the Projects array is the parent / reference array I keep referring to.
Now, dynamically, the href of anchors is modified. What I want it to have is:
javascript:functionName(object)
But what gets called is:
javascript:functionName("[object Object]")

I tried using typeOf within "functionName" ...but couldn't figure out what to do with it. Also, I cannot re-construct the object (say Procedure) again from the toString output for it, since there are many more things about it which functionName doesn't know about.

What should my approach be in such a case ? Thank you in advance for all your inputs.

[gits]

hi ...

welcome to theScripts ....

i'm not quite sure whether i could follow your explainations on what you really want to do ... but i think you want to create objects from a list of declared ones and create them from their names? something like the following?

function MY_OBJ() {
    this.foo = 'bar';
}
 
function create_obj(class_name) {
    return new Function('return new ' + class_name)();
}
 
var a = create_obj('MY_OBJ');
 

kind regards

[paragpdoke]

hi ...

welcome to theScripts ....

i'm not quite sure whether i could follow your explainations on what you really want to do ... but i think you want to create objects from a list of declared ones and create them from their names? something like the following?

function MY_OBJ() {
    this.foo = 'bar';
}
 
function create_obj(class_name) {
    return new Function('return new ' + class_name)();
}
 
var a = create_obj('MY_OBJ');
 

kind regards

Hello Gits.
Thank you for the welcome note.
Yes...I have been able to build such objects. Next I create a function / procedure called "display_obj". This function expects one argument: reference to an object. Thus my function becomes (trying the CODE tags for the first time):

function display_obj(objToDisplay) {
    //Some innerHTML modified here where property "foo" is handled.
}
 

This function is called by clicking on an anchor. So the href for the anchor would be:

javascript:display_obj(a);
 

But, the browser (Fx and IE) treated "a" as "[Object object]" rather than something that had its own property foo.

I hope to have clarified the problem this time. Pardon me for lack of ability to put it in a clear manner.

[paragpdoke]

Hello Gits.
Thank you for the welcome note.
Yes...I have been able to build such objects. Next I create a function / procedure called "display_obj". This function expects one argument: reference to an object. Thus my function becomes (trying the CODE tags for the first time):

function display_obj(objToDisplay) {
    //Some innerHTML modified here where property "foo" is handled.
}
 

This function is called by clicking on an anchor. So the href for the anchor would be:

javascript:display_obj(a);
 

But, the browser (Fx and IE) treated "a" as "[Object object]" rather than something that had its own property foo.

I hope to have clarified the problem this time. Pardon me for lack of ability to put it in a clear manner.

Please give me a few minutes to upload a sample html file.

[paragpdoke]

Please give me a few minutes to upload a sample html file.

I have uploaded 3 htm files in attachment: http://paragpdoke.googlepages.com/Documents.zip
[Sorry...couldn't find the upload attachment link on this forum yet. Will try to look for it soon.]

The 3rd one is exactly the problem I'm running into.

[paragpdoke]

I have uploaded 3 htm files in attachment: http://paragpdoke.googlepages.com/Documents.zip
[Sorry...couldn't find the upload attachment link on this forum yet. Will try to look for it soon.]

The 3rd one is exactly the problem I'm running into.

Sorry for re-post. By 3rd I meant file "HrefModification.htm".

[gits]

you want to display the object's codeview? ... so in FF/Moz there is a simple way with the toSource()-method ... or you may use the print_r() function described in this linked howto ...

kind regards

[acoder]

[Sorry...couldn't find the upload attachment link on this forum yet. Will try to look for it soon.]

It's not available when you first post, but if you post and then edit within one hour, you should be able to attach the file.

[paragpdoke]

Hello Gits.
Apologies for a delayed response. I tried the toSource method (after your last reply)...but that too did not work. Here's what the modified file looks like:

<html>
    <head>
        <script language="JavaScript">
            function obj(foo) {
                this.foo=foo;
            }
            var a = new obj('thescripts');
            function display_obj(objToDisplay) {
                document.getElementById('myDiv').innerHTML+=objToDisplay.foo;
            }
            function change_link() {
                document.getElementById('myLink').href="javascript:display_obj("+a+");";
            }
        </script>
    </head>
    <body>
        <a href="javascript:change_link();">Click me</a><br>
        <a href="javascript:display_obj("+a.toSource()+");" id="myLink">My link will change</a><br>
        <div id="myDiv"></div>
    </body>
</html>
 

Unfortunately, I did not understand the intent of the print_r function. Haven't used PHP yet....so it was a little difficult for a newbie to understand.

All I'm looking for is a way to make the browser display "thescripts" in the div using JavaScript object "a". When the object is passed statically (not sure if the term is correct - all I mean is without modifying the href via JavaScript) it works. However, when the href is modified by the script, it fails to treat the object as an object.

Thank you acoder for the information about attachments. I will remember this when I have to upload something next time.

Thanks in advance for any more directions.

[gits]

hi ...

is that what you want? use the onclick instead of the href:

[HTML]<html>
<head>
<script language="JavaScript">
function obj(foo) {
this.foo = foo;
}

var a = new obj('thescripts');

function display_obj(objToDisplay) {
alert(objToDisplay.toSource())
document.getElementById('myDiv').innerHTML = objToDisplay.foo;
}

function change_link() {
document.getElementById('myLink').onclick = "display_obj(" + a + ");";
}
</script>
</head>
<body>
<a href="#" onclick="change_link();">Click me</a><br>
<a href="#" onclick="display_obj(a);" id="myLink">My link will change</a><br>
<div id="myDiv"></div>
</body>
</html>
[/HTML]
kind regards

[paragpdoke]

hi ...

is that what you want? use the onclick instead of the href:

[HTML]<html>
<head>
<script language="JavaScript">
function obj(foo) {
this.foo = foo;
}

var a = new obj('thescripts');

function display_obj(objToDisplay) {
alert(objToDisplay.toSource())
document.getElementById('myDiv').innerHTML = objToDisplay.foo;
}

function change_link() {
document.getElementById('myLink').onclick = "display_obj(" + a + ");";
}
</script>
</head>
<body>
<a href="#" onclick="change_link();">Click me</a><br>
<a href="#" onclick="display_obj(a);" id="myLink">My link will change</a><br>
<div id="myDiv"></div>
</body>
</html>
[/HTML]
kind regards

Hi again Gits.
Ummm...no that is not going to help too. See, in the same example you shared above, having:

<a href="#" onclick="display_obj(a);" id="myLink">My link will change</a><br>
 

is equivalent of:

<a href="javascript:display_obj(a);" id="myLink">My link will change</a><br>
 

Both these methods are directly referring to the object "a" directly. Meaning, JavaScript is not modifying either the "href" or the "onclick" attributes of the 2nd anchor in the DOM. Now let us turn to:

document.getElementById('myLink').onclick = "display_obj(" + a + ");";
 

or...as in my example:

document.getElementById('myLink').href = "display_obj(" + a + ");";
 

Both these lines do not work as I want them to. They somehow fail to treat "a" as an object. My file currently has the following (and does not work):
[HTML]
<html>
<head>
<script language="JavaScript">
function obj(foo) {
this.foo = foo;
}
var a = new obj('thescripts');
function display_obj(objToDisplay) {
alert(objToDisplay.toSource())
document.getElementById('myDiv').innerHTML = objToDisplay.foo;
}
function change_link() {
document.getElementById('myLink').onclick = "display_obj(" + a + ");";
}
</script>
</head>
<body>
<a href="#" onclick="change_link();">Click me</a><br>
<a href="#" id="myLink">My onclick will change</a><br>
<div id="myDiv"></div>
</body>
</html>
[/HTML]
All I want to happen is that JavaScript treats "a" as an object after the "href" or "onclick" have been modified by JavaScript.

(I now know the problem with my delayed responses. Even if I've set "Instant email notification" in my control panel, I receive no updates over mail. It is necessary to monitor the thread to learn about replies.)

Thanks in advance again,
Parag P. Doke

[gits]

sorry my bad :) ... now have a look ... we must assign a function reference to the onclick-handler ... so it works now. we replace the onclick through calling change_link() ...

<html>
    <head>
    <script language="JavaScript">
    function obj(foo) {
        this.foo = foo;
    }
 
    var a = new obj('thescripts');
 
    function display_obj(objToDisplay) {
        alert(objToDisplay.toSource())
        document.getElementById('myDiv').innerHTML = objToDisplay.foo;
    }
 
    function change_link(obj) {
        document.getElementById('myLink').onclick = function() {
            return display_obj(obj);
        }
    }
    </script>
    </head>
    <body>
        <a href="#" onclick="change_link(a);">Click me</a><br>
        <a href="#" onclick="alert('test');" id="myLink">My link will change</a><br>
        <div id="myDiv"></div>
    </body>
</html>
 

kind regards

[paragpdoke]

sorry my bad :) ... now have a look ... we must assign a function reference to the onclick-handler ... so it works now. we replace the onclick through calling change_link() ...

<html>
    <head>
    <script language="JavaScript">
    function obj(foo) {
        this.foo = foo;
    }
 
    var a = new obj('thescripts');
 
    function display_obj(objToDisplay) {
        alert(objToDisplay.toSource())
        document.getElementById('myDiv').innerHTML = objToDisplay.foo;
    }
 
    function change_link(obj) {
        document.getElementById('myLink').onclick = function() {
            return display_obj(obj);
        }
    }
    </script>
    </head>
    <body>
        <a href="#" onclick="change_link(a);">Click me</a><br>
        <a href="#" onclick="alert('test');" id="myLink">My link will change</a><br>
        <div id="myDiv"></div>
    </body>
</html>
 

kind regards

PERFECT ! That is exactly what I wanted to happen.
Though I do not understand the significance of each step, I'll try modify this code step by step and learn. Things I learnt from this topic till now:
1) "onclick" is better at working with objects rather than "href". (Please correct me if I'm making mistakes.)
2) One can skip "javascript:" for events as against standard attributes like "href" (shorter code).
3) If you accept the name of an object instance as string ("a"), for it to be treated as an object again, one should use a function reference. Somewhere when passing the string to the reference, it gets transformed back into the object.

Thank you so much gits for your patience. I'm not even sure if I used the right terms for all these questions :-).

[gits]

PERFECT ! That is exactly what I wanted to happen.
Though I do not understand the significance of each step, I'll try modify this code step by step and learn. Things I learnt from this topic till now:
1) "onclick" is better at working with objects rather than "href". (Please correct me if I'm making mistakes.)
2) One can skip "javascript:" for events as against standard attributes like "href" (shorter code).
3) If you accept the name of an object instance as string ("a"), for it to be treated as an object again, one should use a function reference. Somewhere when passing the string to the reference, it gets transformed back into the object.

Thank you so much gits for your patience. I'm not even sure if I used the right terms for all these questions :-).

no problem ... :) i'm glad to help you ... to you points:

1. that's really true :)
2. that's really true either :)
3. not quite sure what you mean with that. the code above works as follows: we reassign the click-handler and that handler has to be a function-reference so that it is called later on when the event gets fired. now in our special case we have to pass a reference to the object too ... since the handler should access the object. let me give you a short example what a function reference is:

var my_func = function(param) {
    // function code
};
 
// as you can see we may assign a variable name to
// a function, we could call it with:
 
my_func('foo');
 
// this is equivalent to:
 
function my_func(param) {
    // function code
};
 
// so the name of the function is its reference and we could use 
// the following for example:
 
window.setTimeout(my_func, 1000);
 
// or even - here func_with_param acts as a closure, that means
// it is called later on with a param that we store in the function for
// later use
 
var func_with_param = function() {
    return my_func('foo');
}
 
window.setTimeout(func_with_param, 1000);
 
// this way we avoid the ugly but typical eval-like-usage:
 
window.setTimeout('my_func("bar");', 1000);
 

kind regards