how to reload/refresh/reinit DynaTree?

Question

When I do the following

$('#tree').dynatree("option","initAjax",{url:"http://google.com"});

I want dynatree to forget about current tree data and reload with new data from the specified url instead. But I find it does not do that by default.

Thanks.

Answer 1

look at the tree.reload() method, it should do what you are after.

see the docs here: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

as in the docs, the tree is the internal drawing of the tree, and you get it by calling the getTree command: $("#node").dynatree("getTree")

Answer 2

tree.reload(); is for data loaded dynamically as in Ajax. If you are working with ul/li lists and need to reload your tree, you have to do: $("#tree").dynatree("destroy"); before your regular dynatree creation code. The destroy parameter is not documented (see http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).

Answer 3

Function the initialization:

function InitTree() {
   $("#tree3").dynatree({
       (...init params...)
   });
}

InitTree();

To reload data, call:

$("#tree3").dynatree("destroy");
InitTree();

Answer 4

This question is a duplicate of Trying to reload/refresh dynatree with new data

My solution does not require detours like empty() and destroy() etc. Think about this: When the Dynatree is created you specify a dictionary of settings it must use. However as this is a configuration dictionary it will not be reevaluated even though some parameters are variables and change due to clicks etc. So to solve this and avoid expensive operations like deleting the DOM and recreating it we do it the way I think the Dynatree developers has this intended (but not so clearly documented in the AJAX/JSON example):

  //The HTML:
      <input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
      <label id="mylabel"></label>

  $("#checkbox").click(function() {
    $("#mylabel").text($(this).is(":checked"))
    $("#tree").dynatree("option", "initAjax", {
             url: "myurl/myphp.php",
             data: {
                myparameter: $("#checkbox").is(":checked").toString()
             }
     });

    $("#tree").dynatree("getTree").reload();
  });

This example sets the configuration on the #tree every time the button is clicked, then reloads the tree.

Answer 5

if You Want To Reload the Dynatree Means First Remove the node By he below code

$("#tree").dynatree("getRoot").removeChildren();

Answer 6

Initially, i was using the "options" with initAjax to make the ajax call. However, since i had to show an error message incase there was an empty response from the server after the reload, i decided to go the usual ajax route. I make the ajax call, get the response and then reload the tree. So i did it like this in my javascript file

    var myObj = {getDynaTree :function(){

    //Refresh the dynatree
    $("#dynaTree").dynatree("option", "children", null);
    $.ajax({
        url: "myurl", 
        type: "POST", 
        dataType: "application/json", 
        headers:{'Accept' :'application/json',  'Content-Type':     'application/json' }, 
        data : JSON.stringify(myData),
        //handle the response
        complete : function(treeData)
            {

            $("#dynaTree").dynatree("option", "generateIds", true);      

            var parsedTreeData = JSON.parse(treeData.responseText);

            if(parsedTreeData.length ==0) {
                var parsedTreeData = [{title: "No documents found for the  search criteria, please revisit the criteria",
                    isFolder: false, tooltip: "No documents found for the search criteria, please revisit the criteria" }];

            } 
            $("#dynaTree").dynatree("option", "children", parsedTreeData);
            $("#dynaTree").dynatree("getTree").reload();

            }
        });

    }}

Calling function

    $("#myLink").click(function() {  myObj.getDynaTree(); }

The dynatree was initialized in a seperate javascript file

    //Initialization for the dyna tree. 
    var treeData = [{title: "Dynamic Tree Demo",isFolder: false, tooltip: "Here, is your Dynamic Tree!" }];

    jQuery(document).ready(function() {
    initReqActions(treeData);   
    });

    initReqActions= function(myTree){
     $("#dynaTree").dynatree({
        checkbox: false,            
        selectMode: 2,
         // create IDs for HTML elements that are generated
          generateIds: true, 
          cookie: {
              expires :-1  
          },    
        children: myTree,           
        onQuerySelect: function(select, node) {
            if( node.data.isFolder )
                return false;
        },

        onClick: function(node, event) {
            if( ! node.data.isFolder )
                node.toggleSelect();
        },
        onDblClick: function(node, event) {
            node.toggleExpand();
        },
        onKeydown: function(node, event) {
            if( event.which == 32 ) {
                node.toggleSelect();
                return false;
            }
        }


    });
}

Answer 7

n= "#tree";
$(n).dynatree({});
tree = $(n).dynatree("getTree");
root = tree.getRoot();
tree.enableUpdate(false);
root.removeChildren();
tree.enableUpdate(true);