can't use addChild method

Question

I'm using the dynatree plugin for the first time, and I'm trying to add nodes dynamically. My code is below:

function DrawTree() {
 var names = GetChildName();  
 var rootNode = $("#ProcessRoleTree").dynatree("getRoot");
 var childNode = rootNode.addChild({ title: names[0].Name });
}

On runtime an error displays

Microsoft JScript runtime error: Object doesn't support this property or method

Am I missing something ?? I have verify that i included needed libraries :

<script src="Jquery/jquery/jquery.js" type="text/javascript"></script>
<script src="Jquery/jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="Jquery/jquery/jquery.cookie.js" type="text/javascript"></script>

<link href="Jquery/src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css" />
<script src="Jquery/src/jquery.dynatree.js" type="text/javascript"></script>

Thanks in advance!

Is the GetChildName(); returning an array and if so, does the objects inside that array have the .Name property? — Henrik Andersson, Mar 12 '12 at 10:01
yes GetChildName() return an array of objects that have Name as property — HRI, Mar 12 '12 at 10:08
Can you tell if the exception is in your code (i.e. is rootNode null or something other than the dynatree command obejct) or somewhere inside the dynatree code? Can you step into this using the IE debugger (or a Firefox or Chrome debugger)? — Rup, Mar 12 '12 at 10:13
rootNode is not null, the exception displays when trying to addChild. This method does not appear in the Intellicence also!! — HRI, Mar 12 '12 at 10:20
i can't step into, while i'm trying the exception shows. it's like this method does not exist in the library — HRI, Mar 12 '12 at 10:28
try adding dummy text for title to check, like :: rootNode.addChild({ title: 'Hello World' }); to see if that works... — Sudhir Bastakoti, Mar 12 '12 at 10:46
You need to step into the getRoot call and you need to make sure you're getting back a DynaTreeNode object. That's the object that has `addChild`. — Rup, Mar 12 '12 at 10:51
how do i know if i'm getting a DynaTreeNode?? $("#ProcessRoleTree").dynatree("getRoot") suppose to return a DynaTreeNode right? — HRI, Mar 12 '12 at 11:46

score 0 · Answer 1 · answered Mar 12 '12 at 11:03

0

You need to initialise the tree first before you can call dynatree("getRoot"), e.g. in the simplest instance

function DrawTree() {
  var names = GetChildName();
  $("#ProcessRoleTree").dynatree();
  var rootNode = $("#ProcessRoleTree").dynatree("getRoot");
  var childNode = rootNode.addChild({ title: names[0].Name });
 }

should work. You can instead pass in lots of other options into the tree init step, e.g. see the documentation.

answered Mar 12 '12 at 11:03

Rup

33,765
9
83
112

OK, sorry. Can I check then that both `id="ProcessRoleTree"` actually exists on your page and that it exists in the DOM at the point you're calling this code, i.e. you're calling this from the jQuery ready handler rather than as the page loads? Otherwise I think you'll need to step into both of the `.dynatree` calls to make sure they're doing what you're expecting them to. – Rup Mar 12 '12 at 11:52
i'm not sure if i understand what u mean!! i'm calling this method on button click – HRI Mar 12 '12 at 11:56
$("#ProcessRoleTree").dynatree("getRoot") suppose to return a DynaTreeNode right? in my case i guess it does not return DynaTreeNode Object any idea why?? – HRI Mar 12 '12 at 13:04
No, sorry. Here's an example on jsFiddle using your code that seems to work: http://jsfiddle.net/rupw/RL5Gd/ – Rup Mar 12 '12 at 13:20
ok thank you. still not working here!!! .dynatree("getRoot") is not returning DynaTreeNode Object... i tried it from onCreate and it worked!! weird!! – HRI Mar 12 '12 at 13:33

Zack · Accepted Answer · 2012-03-30T13:27:08.940

This might not be your problem, but it is worth a shot. Sometimes, when using jQuery with other libraries, you can run into conflicts with conflicting code. jQuery uses the $ sign as a shortcut for jQuery. The dynatree library also use the dollar sign for their functions.

I ran into this problem when implementing my tree and this is how I fixed it. As you can see, I replaced all '$' with 'jQuery'.

<script type="text/javascript">
jQuery.noConflict();

function DrawTree() {
    var names = GetChildName();
    jQuery("#ProcessRoleTree").dynatree();

    var rootNode = jQuery("#ProcessRoleTree").dynatree("getRoot");

    //Try adding a key
    var childNode = rootNode.addChild({ title: names[0].Name, key: "001" });
}
</script>

can't use addChild method

2 Answers2