JavaScript tree functionality without framework

Question

I'd like to display a tree on a Facebook page with JavaScript. Therefore there can be no dependencies on frameworks such as jQuery or Ext which won't run on Facebook, at least as far as I know when I last worked on that platform (April 2009). Can anybody recommend a "framework-free" JavaScript/tree library? I have ported some fairly complex JavaScript to Facebook so I'm sure I'll be able to port just about any existing pure JavaScript library.

Clarification points:

• I am targeting FBJS
• I too can (and did) google for JavaScript/tree engines but am seeking recommendations as to which one(s)

Answer 1

I looked at the munging in FBJS. Not sure why it would make jQuery not work, but if someone has some insight, I'd love to hear it.

I do know that you probably can't use jQuery's $ due to conflicts. But that can be changed from $() to jQuery() easily enough.

I could tell you what treeview I like, but without trying it in Facebook it might fail for the same reasons as jQuery.

Answer 2

Even if you work mostly in FBML and FBJS, you can use <fb:iframe/> to render raw HTML and JavaScript without the FB munging going on.

What kind of page are you targeting? <fb:iframe/> works on canvas pages but not on a user's profile page.

Answer 3

You didn't describe the requirements for your JS tree, so I would suggest you write one yourself. It's a relatively simple task unless you need more complex functionality.

A simple tree is just a matter of having a bunch of DOM nodes that have other DOM nodes inside them that can be toggled on and off (display block/none)

Answer 4

What are your requirements? Can you post a snippet of code that you'd like to work with the library? Eg:

<div id="mytree"></div>
(function(){
  var tree = new TreeLib("mytree", {
    name: "Root", 
    expanded: true, 
    children: [
      {name: "first child"},
      {name: "another child"}
    ]
  });
  tree.onclick = function(node){
    alert("You clicked " + node.name);
  };
})();

Answer 5

Look at this implementation... http://www.destroydrop.com/javascripts/tree/

Answer 6

You really should write and test your own to get exactly what you want, and you didn't describe exactly what you want from a tree, but perhaps you could try the free version of treeview.