CODEWITHSUNDEEP
jqueryajaxfancytree
Migerusantte
Migerusantte

Reputation: 323

Reload entire Fancytree

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.

Upvotes: 18

Views: 19900

Answers (9)

Jaber Al Nahian
Jaber Al Nahian

Reputation: 1061

Another simplest way to just reload main tree is:

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

Upvotes: 0

Fabián Vásquez
Fabián Vásquez

Reputation: 41

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#

Upvotes: 2

pamit
pamit

Reputation: 332

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!

Upvotes: 1

NullIsNot0
NullIsNot0

Reputation: 411

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

Upvotes: 0

user1434702
user1434702

Reputation: 829

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.

Upvotes: 1

MattB
MattB

Reputation: 29

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({
...

Upvotes: 2

Marco Viegas
Marco Viegas

Reputation: 84

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

Upvotes: 5

Renaud
Renaud

Reputation: 79

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 ();

Upvotes: 7

Rasheed Jahjah
Rasheed Jahjah

Reputation: 566

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);
    //...
  }
});

Upvotes: 17

Related Questions