Reload entire Fancytree

Question

I have a combobox with different options that each brings up a fancytree to the screen.

I make an ajax call to get the source for the fancytree but it's not reloading and shows the same options again and again.

part of the code:

$.ajax({
 url: "get_treedata.php",
 type: "POST",
 data: {
       id: id
       },
 success: function(json){
   console.log(json);

    var mynodes = JSON.parse(json);
    $('#t-board').fancytree( // t-board is my div container
       {
          source: mynodes,
          ... // my other options
    });
  }
});

that code is inside a function that I call in the "onchange" of my combobox. Tell me what you think, and if I need to be more specific or something.

Thanks in advance.

Cowboy

Answer 1

You can not re-initialize the tree. But you can update the tree options or reload it with new source option.

• Reload the tree with new source option

  var treeOptions = {...}; // initial options
  $('#t-board').fancytree(treeOptions);
  $('#combobox').change(function () {
  var id = $('option:selected', this).val();
  
    var newSourceOption = {
      url: 'get_treedata.php',
      type: 'POST',
      data: {
        id: id
      },
      dataType: 'json'
    };
  
    var tree = $('#t-board').fancytree('getTree');
    tree.reload(newSourceOption);
  });
  

• Add or replace other tree options

  var treeOptions0 = {...}; // initial options
  var treeOptions1 = {...}; // other tree options
  var treeOptions2 = {...};
  $('#t-board').fancytree(treeOptions0);
  $('#combobox').change(function () {
  
    var id = $('option:selected', this).val();
  
    if(id === '1'){
      $('#t-board').fancytree('option', 'selectMode', treeOptions1.selectMode);
      $('#t-board').fancytree('option', 'renderNode', treeOptions1.renderNode);
      $('#t-board').fancytree('option', 'icons', treeOptions1.icons);
      //...
    }else if(id === '2'){
      $('#t-board').fancytree('option', 'selectMode', treeOptions2.selectMode);
      $('#t-board').fancytree('option', 'renderNode', treeOptions2.renderNode);
      $('#t-board').fancytree('option', 'icons', treeOptions2.icons);
      //...
    }
  });
  

Tribromoethanol

Answer 2

Found your post while searching for a solution myself, and could not find any on the web.

But I just thought about a little trick and it did work so in case it helps you or someone else.

Just remove the tree div, then put it back and load it again, something like that:

$("#tree").remove();
$("#tree_container").append('<div id="tree"></div>');
get_tree ();

Restitution

Answer 3

You can also change the tree source without change other options using the following code:

$('#t-board').fancytree('option', 'source', myJsonData);

Remember that myJsonData must be a valid JSON data like:

var myJsonSource = [
    {title: "Node 1", key: "1"},
    {title: "Folder 2", key: "2", folder: true, children: [
      {title: "Node 2.1", key: "3", myOwnAttr: "abc"},
      {title: "Node 2.2", key: "4"}
    ]}
  ];

https://github.com/mar10/fancytree/wiki#configure-options

Hydromedusa

Answer 4

Create a container div.

<div id="tree-container">
    <div id="tree" style="width: 100%;"></div>
</div>

Then empty the container and append back in the div for the tree. At this point initialize fancy tree and it will load the new settings and content.

$("#tree-container").empty();
$("#tree-container").append('<div id="tree" style="width: 100%;"></div>');
// Initialize Fancytree
$("#tree").fancytree({
...

Kleeman

This is not what is being asked. He wants to reload, not creating new things – Judicature

Answer 5

After of many tries, This example was really usefull to me:

$.ui.fancytree.getTree("#tree1").reload([
          {title: "node1"},
          {title: "node2"}
        ]).done(function(){
          alert("reloaded");
        });

http://wwwendt.de/tech/fancytree/demo/sample-source.html#

Compass

Answer 6

this.$('.tree-wrapper').fancytree({
  source: []
  ...
});
var tree = this.$('.tree-wrapper').fancytree('getTree');

On your callback

tree.reload(mynodes)

You must provide an empty array for source on tree initialize.

Kirt

Answer 7

Initialize the tree outside your AJAX call:

$('#my-tree').fancytree({
    extensions: ["table"],
    focusOnSelect: true,
    autoCollapse: true,
    clickFolderMode: 3,
    table: {
        indentation: 20,
        nodeColumnIdx: 1
    }
});

Then, reload the tree in your ajax call:

function loadData() {
    $.ajax({
        type: "POST",
        data:{
            id: $('#some-element').val(),
        },
        url: _URL_,
        success: function (result) {
            var tree = $('#my-tree').fancytree('getTree');
            tree.reload(result.data)
            .done(function() {
                // console.log('tree reloaded');
            });
        }
    });
}

Happy coding!

Chastity

Answer 8

FancyTree fetches JSON itself, you don't need to do it manually:

var id = 3;

$('#t-board').fancytree({
    source: {
        url: 'get_treedata.php',
        type: 'POST',
        data: {
            id: id
        },
        cache: false
    }
    ... // other options
});

When you need to pass another id value to get_treedata.php and load data into FancyTree, you just set new source option and FancyTree reloads itself:

id = 5;

$('#t-board').fancytree('option', 'source', {
    url: 'get_treedata.php',
    type: 'POST',
    data: {
        id: id
    }
    cache: false
});

Shorter way to reload FancyTree:

$('#t-board').fancytree({
    url: 'get_treedata.php',
    type: 'POST',
    data: {
        id: id
    }
    cache: false
});

That's it. Happy coding :)

P.S. This works on v2.26.0

Underdog

Answer 9

Another simplest way to just reload main tree is:

 $("#treegrid").fancytree("getRootNode").tree.reload();

Kirstenkirsteni