Updating jqTree after initialization?

Question

I'm new with jqTree and I'd 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 is working but for the next ones the tree doesn't update with the new data.

Any idea how to update the tree after initialization ?

Thanks

EDIT :

I found a solution but it's not perfect. If someone has a better solution let me know :)

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

I have to remove the generated content by jqTree using $.empty() and then initialize jqTree each time I want to update the tree with new data.

Did you check using firebug or anything else that the second time the request is sent? Did you check jsonData content? — Michael Laffargue, Feb 17 '12 at 09:48
The new version of jqTree allow the update of the tree. See the code in the accepted answer. — BenoitD, Mar 27 '12 at 06:27
I recommend reading through the examples in the test suite. I found a lot of examples that seemed to be incorrect in the documentation. — Rimian, Oct 24 '12 at 05:45

score 6 · Accepted Answer · edited Oct 24 '12 at 02:24

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

For example:

// 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

score 0 · Answer 2 · answered Oct 25 '12 at 00:40

The current version of jQtree (0.1.3) lets you lazy load from the server.

You documentation says need to ser the url like this:

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

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

All subsequent requests will append the node id like so:

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

And you must set load_on_demand:

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

Also see:

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

But I had trouble getting this to work and had to manually 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;
  });
});

score 0 · Answer 3 · answered May 08 '15 at 15:38

0

Assume, you initialized element $jqtree_element = $("#tree1") and run some jqTree initialization: $jqtree_element.tree(...)

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

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

answered May 08 '15 at 15:38

xisalreadytaken

21
2

Updating jqTree after initialization?

3 Answers3