It has been a day since Ajaxian published a feed on jsTree – a tree javascript tree component. I did not expect that much attention, and it is obviously hard for people to contact me – so I decided to put a blog up.
I would love to get some ideas, critics and comments about the component so feel free to comment here or post issues at the projects page.
Expect new demos and docs soon.
Thanks to Ilia Goranov, flashBG.org, Kaloyan and Nikolay for spreading the word.
Haven’t checked out the api, but assuming the ability to listen to events this looks freakin’ beautiful. Possibly even better than extjs’s. Well done man.
Hi, your jsTree is really cool. One question, is it based one some common used js framework like Prototype of jQuery?
@Hung Nguyen
Yes, it is based on jQuery, and also uses a few additional plugins (all included in the download).
@Marcus Westin
Thanks :) Drop a note if you start using it, I am accepting crictics and ideas for the upcoming version.
We are looking at using jsTree in a JBoss Seam (JSF/Facelets) web application. The tree is part of a larger form with other fields. In reviewing the code, I don’t see a way of getting the tree content (data) after the user makes changes and hits the submit button.
Also, is there a way of dynamically loading JSON data from the server via AJAX methods.
@DJ
I’m not sure if I correctly understood you question, but I believe what you are looking for are the callbacks – basically you get all the nodes involved as arguments (onrename -> you get the node and the language, onmove _> you get the node, the reference node, type of the move etc …)
If you are looking for getting the whole tree back – there is no predefined method for that (I’m writing it down and will include it in the next minor version)
As for the async loading of JSON in the tree – for this example I’ll assume the tree object is called tree1
So you attach the onopen callback in the initialization.
onopen : function (NODE) { … }
Inside your function you get the JSON from the server, transform it to HTML and insert it:
json = $.get(…
str = tree1.parseJSON(json);
$(NODE).children(“ul:eq(0)”).html(str);
That is about it.
Drop me a note if this works for you.
There is a speed issue when you try drag&drop big tree (try to open all nodes in XML tree and drag it). IMO the solution for this issue is to only show/render first N nodes when you drag and hide the rest (with some gradient effect or just cut it)
Thx for your great work :)
… also when I dragged a part of the second tree to first one, some rendering glitches appear (using Safari 3.1 on WinXP)
This is sound good but i am looking for PHP wrapper for it.
have you any source regarding it ?
I have looked PEAR TREE package and i like it most.
Nice plugin, but how about to save the current status in a cookie?
@mrrau
Thanks for the info – I’ll look up to it. I believe it would be most apropriate to close all second level nodes when dragging, and reopen them after the drop (a simple solution involving one line of CSS)
Drag&drop between trees is still on my to do list :)
@Ravi Raj
I have a PHP script for maintaining a tree ina database (using adjacency/nested sets or both)
@TC
The next version will feature saving open nodes and selected node in a cookie (which will be configurable)
Well done!!!
Do you plan to add support for Right-To-Left one day?
@Gregory
Writing it down – I believe it won’t be too difficult.
Hey! GREAT work. Very very admirable.
A couple of things:
* Does it work with internet explorer ? For me it doesn’t. (The system can’t locate the object specified).
* I join DJ in his comment about not having a getAllData() some kind of function that could collect all the information into an array of some sort. Is it coming in the next version maybe ?
@Rafi B.
A function named getJSON is already included in v.0.6, which will be available for download soon.
As for explorer – maybe if you could send me more details? It is supposed to work in explorer and I have not had any issues with this release. Are you loading an XML, or using JSON as data?
@vakata,
thanks for the quick reply. I’m really glad I find this plugin of yours, it’s amazing. I’d love to get the new version, and I’d love to sort out my IE problem.
I use an XML.
Any ideas?
When will the 0.6 come out aprox?
@Rafi B
Version 0.6 is already commited to the svn at google code. I will attach a download along with demos of the new functionality on Monday (or later this evening if I have the time).
Please send me an URL so that I can see what is wrong or mail me the sources.
@vakata,
hey, this is the url: http://pronet-ltd.com/cat/
No clue why it’s not working on IE… :(
@Rafi B
I checked it out, I believe the server does not return the correct header for the xml/xsl. I just copied the source to my server and it worked.
Make sure you have this header:
Content-type: text/xml; charset=utf-8
I’m triying to get metadata and use_inline properties in order to set a max_depth in a tree.
I’ve just checkout 0.6 version from google code. It seem there is an error in line 463, because mov variable is not defined. I fixed it adding var mov = false; at first line of checkMove function.
Do you plan to include an example of metadata/maxdepth in documentation for next version?
Great job, keep working!
@newuni
Sorry for the mistake and thank you, i did some optimization in this function and obviously missed a few tests – it should be TYPE instead of mov. Anyway – I will do the testing right away.
As for the docs and examples – I am currently working on them, so that they will be much more useful in the next version. This is why I am also delaying the new featured download. It will be up in a few days.
Hi,
looks like tree (tried examples page: http://vakata.com/jsTree/examples/) is not working on Safari (on Mac and PC). I get such error message in Safari’s console: INDEX_SIZE_ERR: DOM Exception 1 http://vakata.com/jsTree/_source/css.js (line 25)
I believe it’s not a big deal ;)
@Valdas
I rolled back to a version that I have been informed that works on Safari. (It was a small change really). So I believe it should be working again – thank you! :)
Yes, it does work on Safari now :)
Hello,
I intend to use your jstree for a new project. However, I cannot seems to get links working. At the moment I have a predefined html tree with standard a tags and href values. Any idea why this isn’t working?
Thanks
@Ste
Just attach an onchange callback:
…
onchange : function(NODE,TREE_OBJ) {
document.location = $(NODE).children(“a:eq(0)”).attr(“href”);
}
…
Thanks, Vakata,
That works well. However, I now appear to have another problem relating to tree_component.js on line 70.
Here is the error from Firebug:
$.extend is not a function
[Break on this error] this.settings.callback = $.extend({},this.settings.callback,opts.callback);
Thanks for your help,
Ste
@ste
Make sure you have the version that comes with jsTree (or the latest version) of jquery included.
@Vakata
Thanks for the quick reply.
I have made sure to include the latest version of jquery.
I still get the same error.
Thanks,
Ste