2

I am not able to load the initial root nodes using jsTree below: the data is on a server and has to be 'bought in' via AJAX for each node selected. I also want to use a checkbox and get value of all parent nodes of a selected node.

main issue right now is: I am not able to list the root nodes....

//jsTree
    $('#testTree').jstree({
        'core' : {    
            'data' : {    
                'url' : function (node) {    
                    return node.id === '#' ?    
                    '/cgi-bin/test.pl'  //url for root nodes    
                    '/cgi-bin/test.pl?nodes-in-selected-heirarchy'; //url for children nodes    
            },    
                'data' : function (node) {    
                    console.log('node.id='+node.id);    
                    return { 'id' : node.id };    
                }    
            }    
        }    
    });

all that this shows is a folder icon.

the JSON I am getting from the server is:

{"5":"summer","8":"vacation","2":"2015","3":"2014","4":"2013","6":"winter","1":"2016","7":"birthday"}

It is in a key:value, format.

Here is a new modified code: even this does not work ...

$('#test').jstree({
    'core': {
        'data':{                                //this is the data provided to the jsTree to draw the tree.
            'url': function( node ){
                if( node.id === '#' ){
                    console.log('1');
                    return "/cgi-bin/test.pl";
                } else {
                    console.log('2');
                    return "/cgi-bin/test.pl?jsTreeParentKey=" + node.data( "key" );
                }
            },
            'data': function(node) {            //the data sent to the server
                console.log('node.id='+node.id);
                return {
                    'id': node.id,
                    'xyz': 'value_xyz'          //extra set of param=value sent to server
                };
            },
            'success': function (retData) {
                data = [];
                for( indx in retData ){
                    var value = retData[indx]
                    console.log('indx=i'+indx+', value='+value);
                    node = {
                        'id' : 'i'+indx,
                        'text' : value,
                        'icon' : '/',
                        //'metadata' :  value,
                        'state' : {'opened' : false}                //'state' : 'closed'
                    }
                    data.push( node );
                }
                return data;
            }
            // "check_callback" : true                    
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    },
    "plugins" : [ "checkbox","json_data" ]
});

I get this in log:

1  <---- from URL
node.id=# <----from param sent

indx=i1, value=2016
indx=i2, value=2015
indx=i3, value=2014
indx=i4, value=2013
indx=i5, value=summer
indx=i6, value=winter
indx=i7, value=birthday
indx=i8, value=vacation
Timothy
  • 2,004
  • 3
  • 23
  • 29
rajeev
  • 1,275
  • 7
  • 27
  • 45

1 Answers1

2

Your data format (the JSON you return from the server) is not in the required jsTree format. At least include a text property on each of your nodes.

Here are the detailed docs:
https://github.com/vakata/jstree#the-required-json-format

vakata
  • 3,726
  • 1
  • 17
  • 31
  • 1
    hi Ivan, thankx a LOT for reviewing!! yes, my data is (and i prefer it to be) coming in as (key,value) pair. But i thought 'success' routine is using that and then making the required data format before handling it over to the plugin as 'data to build tree with'. is that not? because the data array i build in 'success' routine is matching the requirement on the website for a (any) given 'node'. kindly advice how can the data (key,value pair) coming from server be handled before it is delivered to the pluigin? – rajeev Aug 29 '16 at 15:33
  • 1
    i found elsewhere that the plugin is NOT supporting the success routine. so i will try the dataFilter, (which is kind of 'success' ????) – rajeev Aug 29 '16 at 16:30