15

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.

7 Answers 7

16

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")

2
  • what is "tree" here and how can I get access of it ??
    – Mr Coder
    Sep 6, 2011 at 10:20
  • I believe you need to get $('#tree') and not $("#node") so the answer would be $("#tree").dynatree("getTree").reload()
    – AaA
    Jul 19, 2016 at 3:22
10

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.

0
5

Function the initialization:

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

InitTree();

To reload data, call:

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

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.

1
  • 4
    Thanks for the education. I edited my answer to include the full answer. Oct 11, 2012 at 20:34
2

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

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

1
  • Thank you was waiting for it 😉
    – Mr Coder
    Jul 6, 2016 at 11:50
1

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;
            }
        }


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.