Home/ Questions/Q 6551469
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:20:32+00:00

There are some nodes that get data from AJAX call in my jsTree. How

  • 0

There are some nodes that get data from AJAX call in my jsTree.

How can I refresh the data and NOT by reloading the whole tree?

  • the best would be simple click on the node I wish to refresh
  • context menu is ok too
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about this?

    <html>
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="jquery.jstree.js"></script>
<script>
var treeConfig = { 
  "json_data" : {   
  "data" : [{
      "data" : "Root",
      "state" : "closed",
      "children" : ""
      }],
  "ajax" : {
      "url" : "http://localhost/tree.json",
      "data" : function (node) {                        
          return { query : "Value" };
      }
    } 
  },
  "plugins" : [ "themes", "json_data", "ui" ],
};

$(document).ready(function(){
 $("#treeContainer").jstree(treeConfig);

 $('#treeContainer a').live('click',function(){
    var tree = jQuery.jstree._reference("#treeContainer");
    var currentNode = tree._get_node(null, false);
    tree.refresh(currentNode);
 });

});
</script>
</head>

<body>
 <div id="treeContainer"></div>
</body>
</html>

    Here’s what I’m doing:

    • using the JSON data plugin (but the concept is similar for HTML and XML plugins)
    • loading the initial tree node (“Root”) from the data config object
    • setting the AJAX config object so all other nodes request their child data via ajax, when initially opened (applies to any node where ‘state’ is ‘closed’ and ‘children’ is ’empty’)
    • using the AJAX data function to pass the correct query string to get relevant data for the node being opened. My example always fetches http://localhost/tree.json?query=Value but you probably want to do something like set Value to the node id so the server sends back relevant data.

    So far this makes an ajax request for the node data only the first time the node is opened. The final step is:

    • create a click function which causes a single node to refresh its data every time it is clicked
    • 0