help on yui tree menu

[shotokan99]

hi guys,

my question is regarding yui tree menu. im a newbie and trying to take
advantage of this rich library. my worry is about removeNode() or
how to remove or delete a node on real-time.

i have a code that contains a button and when the user push this
button it will create a node on real-time. and my code goes like this:

function addbtn(){
g=prompt('New Node Name: ','');
if(g.length>0){
e=g;
e=new YAHOO.widget.TextNode(g,mytree.getRoot(),false);
mytree.draw();
}
}

i think i'm ok with it, works well for now and does the trick. now if
i want to remove that recent node my code goes like this:

function rembtn(){
p=prompt('What Node to remove:','');
if(p.length>0){
mytree.removeNode(eval(p),true);
mytree.draw();
}
}

for instance i added a node "games". now upon removing, if type
"games" it will give me an error. but if i type "e", which is the
variable name when i created a node from addbtn() it runs
successfully. can someone pls tell me the work around for my issue?

tnx

 

[David Golightly]

Good for you, but you've got a lot of basics to cover before you're
ready for prime-time.

function addbtn(){
g=prompt('New Node Name: ','');

An identifier (here, "g") assigned a value without first being
declared using the "var" keyword will create a new global variable.
This is probably not what you want. Keep it in local scope using

var g = prompt('New Node name: ', '');

if(g.length>0){

can safely be shortened to - if (g) - (since an empty string has
length 0 and evaluates to "false").

e=g;

Again, always use the "var" keyword to declare your variables.

e=new YAHOO.widget.TextNode(g,mytree.getRoot(),false);

You just assigned "e" the value "g" and didn't use it, so the previous
statement was useless. Also, where does mytree come from?

mytree.draw();
}

}

i think i'm ok with it, works well for now and does the trick. now if
i want to remove that recent node my code goes like this:

function rembtn(){
p=prompt('What Node to remove:','');

Again, use "var".

if(p.length>0){
mytree.removeNode(eval(p),true);

Why use "eval" here? See clj FAQ: http://www.jibbering.com/faq/#FAQ4_40

Also, referring to the YUI TreeView documentation,
http://developer.yahoo.com/yui/docs/YAHOO.widget.TreeView.html#removeNode,
removeNode expects a YAHOO.widget.Node instance, so you'll need a
clear decision in your head as to what input you expect to receive
from your - prompt - call. Is it the name or label of the node? Then
YAHOO.widget.TreeView provides getNodeByProperty, which you should use
to retrive the node instance from the 'name' or 'label' property. But
for more detail here, you should study the documentation at the link
above, along with the examples at http://developer.yahoo.com/yui/treeview/.

-David

 

[shotokan99]

hi david,

thank you for that detailed explanation, i admit it did helped widened
my understanding about javascript and yui. actually what i am trying
to do is, the value of the prompt will both be the name and label of
the node. that is why i coded it this way:

var g=prompt('New Node Name: ','');
if(g){
var e=g;
e=new YAHOO.widget.TextNode(g,tree.getRoot(),false);
tree.draw();
}
thinking that, var e will have the value of var g. but i dont think
that it is working ;-(
what is the proper way of doing it? i think the bottleneck here is on
adding the node.
because when i tried to remove a node which was hardcoded, it did
successfully.

 

[David Golightly]

hi david,

thank you for that detailed explanation, i admit it did helped widened
my understanding about javascript and yui. actually what i am trying
to do is, the value of the prompt will both be the name and label of
the node. that is why i coded it this way:

var g=prompt('New Node Name: ','');
if(g){
var e=g;
e=new YAHOO.widget.TextNode(g,tree.getRoot(),false);
tree.draw();}

thinking that, var e will have the value of var g. but i dont think
that it is working ;-(
what is the proper way of doing it? i think the bottleneck here is on
adding the node.
because when i tried to remove a node which was hardcoded, it did
successfully.

Take a look at your code:

var e=g;
e=new YAHOO.widget.TextNode(g,tree.getRoot(),false);

Where do you think "e" is getting used before it gets reassigned? A
variable can have only one value at a time.

 

[shotokan99]

i see. yes, now i can see the logic. so, what will be the approach to
remove a node by prompting the user to encode the label?