How to reload json data in acitree

Question

I would like to know whether there is any possible way to refresh an aciTree instance from a json object received from the server.

• Let's assume I have an html input field.
• The user types something and clicks the submit button.
• This input is used to get a new version of the json tree model from the server through an ajax call.

That works fine. However, when I type again a new value in the input field and submit the aciTree does not reflect the new values. It still displays the old json object data.
Here is my code.

User Name: <input type="input" id="name"  name="name">
          <input type="submit" value="search" id="call"  >

<script type="text/javascript">

  $(document).ready(function(){

// Makes the ajax call and fetches the json for the resource tree.
$('#call').click(function(){

  $("#tree").aciTree({
	ajax: {
      url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+',
		}
    });
  });
 
  // Refreshing the tree view - Destroy and recreate
  $('#call').click(function(){
    var api = $('#tree').aciTree('api');
    api.unload(null, {
      success: function() {
        this.ajaxLoad(null);
        // Triggering the click handler of the Get Tree View button.
        // This will make the ajax call again and bind the tree...
        $('#call').trigger('click');
      }
    });
  });
 
  // ACI Tree - event handler.
  $('#tree').on('acitree', function(event, aciApi, item, eventName, opt) {
    switch (eventName) {
      case 'focused':
      case 'selected' :
      // Fired when an item in the tree is selected.
      if(item) {
        $currStatus.text('Selected - ' + item.context.innerText);
        } 
      }
    });
});
</script>

<div id="tree" class="aciTree aciTreeNoBranches aciTreeFullRow" style="width:100%;height:auto;margin:0;padding:0;border-left:0;border-right:0"></div>

Please let me know whether there is any way to achieve this.

Answer 1

<script type="text/javascript">
    
$(document).ready(function(){
	

  
    // Makes the ajax call and fetches the json for the resource tree.
    $('#call').click(function(){
    	
		$("#tree").aciTree({
		    ajax : {
		    	
			    url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+',
			   
		    }
	    });
    });
 
    // Refreshing the tree view - Destroy and recreate
    $('#call').click(function(){
		var api = $('#tree').aciTree('api');
		
        api.unload(null, {
            success: function() {
                this.ajaxLoad(null);
                // Triggering the click handler of the Get Tree View button.
                // This will make the ajax call again and bind the tree...
                $('#call').trigger('click');
                
                
            }
        });
    });
 
    // ACI Tree - event handler.
    $('#tree').on('acitree', function(event, aciApi, item, eventName, opt) {
        switch (eventName) {
            case 'focused':
            case 'selected' :
                // Fired when an item in the tree is selected.
                if(item) {
                	$currStatus.text('Selected - ' + item.context.innerText);
                } 
        }
    });
});
</script>

<div id="tree" class="aciTree aciTreeNoBranches aciTreeFullRow" style="width:100%;height:auto;margin:0;padding:0;border-left:0;border-right:0"></div>

Answer 2

$(_selector_).aciTree(_options_) call will init the tree view just once (using the provided options). Nothing will happen if you call it twice. To be able to init the tree view with other options, you'll need to destroy it first.

In your case, you need just to update the tree view ajax.url option. First unload the tree, then reload it from the new url.

To update one of the aciTree options at runtime, use the option method. Note that you can use the dot notation to reach deep level properties:

api.option('ajax.url', '_your_new_url_');

Then you can call unload/ajaxLoad (as in your example).