Update jqTree after initialization?

Question

I am new to jqTree and I would like to reload the tree after ajax call. I have something like this:

$("select").change(function(){ var url = 'lab.json'; if ($(this).val() === 'RAD') { url = 'rad.json'; } $.get( url, function(jsonData) { $("#treedata").tree({data: jsonData}); }, "json" ); }); 

The first call works, but for the following trees the tree is not updated with new data.

Any idea how to update the tree after initialization?

thanks

EDIT:

I found a solution, but it is not perfect. If anyone has a better solution let me know :)

  $("#treebox").empty().append('<div id="treedata"></div>'); $("#treedata").tree({ data: jsonData }); 

I need to delete the generated jqTree content with $ .empty () and then initialize jqTree every time I want to update the tree with new data.

Answer 1

You can use the loadData function to load new data into the tree. This feature is supported in the latest version of jqTree (0.6).

For instance:

 // Assuming the tree exists var new_data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ]; $('#tree1').tree('loadData', new_data); 

Also see http://mbraak.github.com/jqTree/#functions-loadData

Answer 2

The current version of jQtree (0.1.3) allows you to lazily load from the server.

In the documentation you must provide the url:

<div id="tree1" data-url="/nodes/"></div >

 $('#tree1').tree({ dataUrl: '/example_data.json' data: <original data> }); 

All subsequent requests will add an id node like this:

 <data-url>?node=<node-id> 

And you should set load_on_demand:

 [ { label: 'Saurischia', id: 1, load_on_demand: true }, { label: 'Ornithischians', id: 23, load_on_demand: true } ] 

See also:

http://mbraak.github.com/jqTree/examples/example5.html

But I was not able to get this to work, and I had to manually attribute the dataUrl attribute with something like:

 $(document).ready(function() { $("#tree1").tree({ dataUrl: function(node) { if (node) { return '/nodes.json?node=' + node.id; } else { return '/nodes.json' } } }).bind('tree.click', function(event) { var node = event.node; }); }); 

Answer 3

Suppose you initialize the element $jqtree_element = $("#tree1") and run the initialization jqTree: $jqtree_element.tree(...)

I dig the code (jqTree, 1.0.0) and found this very useful:

 $jqtree_element.data('simple_widget_tree')._refreshElements()