+ Start a Discussion
Rahul_SalesforceRahul_Salesforce 

Facing issue when trying to fetch data retrived after sucessfull JSON call

Hi I am working on a jstree implmentation using Javascript and forcetk library(Rest based).
Here is the code I have found from github which I am trying to use.

Component ::
<apex:component >
    
    <apex:attribute name="objectType" description="Used for the REST Query" type="String" required="true"/>
    <apex:attribute name="parentObjectName" description="Used for the REST Query" type="String" required="true"/>
    <apex:attribute name="fieldToQuery" description="Child field Name" type="String" required="true"/>
    <apex:attribute name="parentId" description="The inital id of the parent." type="String" required="true"/>
    <apex:attribute name="objectPluralLabel" description="The plural label." type="String" required="true"/>
    
    
    <apex:includeScript value="{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/_lib/jquery.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/forcetk.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/_lib/jquery.cookie.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/_lib/jquery.hotkeys.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/jquery.jstree.js')}"  />
    
    
    <div id="tree2"></div>
    <div id="tree"></div>
    <div id="dbg"></div>
    
    <script type="text/javascript">
       
        //////////////////////////////////////////////////
        //
        // VARS
        //
        //////////////////////////////////////////////////
        
        var dbg = false;    
        var objectToQuery = '{!objectType}';
        var parentId = '{!parentId}';  
        var fieldToQuery = '{!fieldToQuery}';

        var pluralLabel = "{!objectPluralLabel}";
        
        //////////////////////////////////////////////////
        //
        // Get a reference to jQuery that we can work with
        //
        //////////////////////////////////////////////////
        
        $j = jQuery.noConflict();
        
        ///////////////////////////////////////
        //
        // Load the themes
        //
        ///////////////////////////////////////
        
        //$j.jstree._themes = "{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/themes/')}";
        
        ///////////////////////////////////////
        //
        // Get an instance of the REST API client
        //
        ///////////////////////////////////////
        
        var client = new forcetk.Client('{!$Api.Session_ID}');
    
        //////////////////////////////////////////////////
        //
        // Instantiate the inital jsTree
        //
        /////////////////////////////////////////////////
        alert('Rahul'+'{!parentObjectName}');
        $j("#tree").jstree({ 
                "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ],
        
                "json_data" : {
                    "data" : [
                        { 
                            "data" : "{!parentObjectName}",
                            "state": "closed", 
                            "attr" : { "id" : parentId }
                         
                        },
                    ]
                },
                "types" : {

                    "max_depth" : -2,
                    "max_children" : -2,
                    "type_attr" : "rel",
                    "valid_children" : [ "default" ],
                
                    ////////////////////////////////
                    // Define the themes
                    ////////////////////////////////
                    
                    "types" : {
                
                            "children" : {
                                "icon" : { 
                                    "image" : "{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/folder.jpg')}" 
                                },
                                "valid_children" : ["noChildren","children" ]
                            },
                            "noChildren" : {
                                "icon" : { 
                                    "image" : "{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/leaf.jpg')}" 
                                },
                                "valid_children" : ["noChildren","children" ]
                            },
                            
                            "default" : {
                                "icon" : { 
                                    "image" : "{!URLFOR($Resource.restJavascript, '/lazy-load-tree-master/source/rest/home.jpg')}" 
                                },
                                "valid_children" : [ "noChildren","children" ]
                            }
                    }
                }
           
                
                
            });
            
    //////////////////////////////////////////////////
    //
    // Add the logic to query if there are children
    //
    /////////////////////////////////////////////////
    
    $j("#tree").bind("open_node.jstree close_node.jstree click", function (e,data) {
            
         //loadNode(parentId);
         
        console.log('SeriousRahul'+data.instance.get_node(data.selected[0]).text);
         //loadNode($j(this).parent().attr("id"));
        if(e.type == 'open_node' && data.args[0].attr("id") != parentId) {
           
            var thisNode = $j('#'+data.args[0].attr("id"));
            
            if(thisNode.find('li').length == 0) {
            
                loadNode(data.args[0].attr("id"));
           
            }
        }
        
        
    })
    
    $j("#tree").delegate("a","click", function (e) {
        
        /// Dont open a window for ultimate parent
        if($j(this).parent().attr("id") != parentId) {
        
            window.open("/" + $j(this).parent().attr("id"),"mywindow","status=1,toolbar=1,location=1,menubar=1,resizable=1,scrollbars=1");

        }
     });
     
    //////////////////////////////////////////////////
    //
    // Load nodes
    //
    /////////////////////////////////////////////////      

    function loadNode(parentIdPassed) {
      
        var query = "SELECT Id," +fieldToQuery +", Name, (Select Id From "+pluralLabel+") FROM " + objectToQuery + " WHERE " +fieldToQuery +" = '" + parentIdPassed + "'";
          alert('Rahul'+query);
        /////////////////////
        /// Debugging
        /////////////////////
        
        if(dbg) {document.getElementById('dbg').innerHTML += "<br/>---<br/> node query - " + query;}
        
        client.query(query,parseNode);
    
    }
    
    function firstNodeLoad() {
        
        var query = "SELECT Id," +fieldToQuery +", Name, (Select Id From "+pluralLabel+") FROM " + objectToQuery + " WHERE " +fieldToQuery +" = '" + parentId + "'";
        
        
        alert('++++' + query);
        /////////////////////
        /// Debugging
        /////////////////////
        
        if(dbg) {document.getElementById('dbg').innerHTML += "<br/>---<br/> firstNodeLoad query - " + query;}
 
        client.query(query,parseNode);
        
    }
      
     
    //////////////////////////////////////////////////
    //
    //  Parse the REST repsonse
    //
    /////////////////////////////////////////////////
    
    function parseNode(response) {
        
        //system.debug('RahulResponseLength'+response);
        
        for(var i=0; i<response.records.length; i++) {
            
            var hasChildren = false;
            
            if(response.records[i][pluralLabel]!= null) {
                
                hasChildren = true;
            }
            
            addNode(response.records[i][fieldToQuery],response.records[i].Name,response.records[i].Id,hasChildren);
            
        }
            
    }   
        
    //////////////////////////////////////////////////
    //
    // Add each node
    //
    /////////////////////////////////////////////////       
    
    function addNode(localParentId,nodeName,nodeId,hasChildren) {
            
            ////////////////////////////////////////////
            //
            // Create a new node on the tree
            //
            ////////////////////////////////////////////
            alert('Rahul'+nodeName+nodeId);
            
            if(hasChildren) {
            
                /// If it has children we load the node a little differently
                
                $j("#tree").jstree("create", $j("#"+localParentId), "inside",  { "data" : nodeName ,"state" : "closed","attr" : { "id" : nodeId,"rel":"children"}},null, true);

                
            } else {
            
                $j("#tree").jstree("create", $j("#"+localParentId), "inside",  { "data" : nodeName ,"state" : "leaf","attr" : { "id" : nodeId,"rel":"noChildren"}},null, true);
            
            }
            
    }
    
    window.onload = firstNodeLoad;
  
    </script>
    

</apex:component>
when I am making the JSON request the data is comming properly but not sure why it is not available in the below function from above component. when I am trying to print data it is coming as "undefined".Any help would be appreciated.
$j("#tree").bind("open_node.jstree close_node.jstree click", function (e,data) {
            
         //loadNode(parentId);
         
        console.log('SeriousRahul'+data.instance.get_node(data.selected[0]).text);
         //loadNode($j(this).parent().attr("id"));
        if(e.type == 'open_node' && data.args[0].attr("id") != parentId) {
           
            var thisNode = $j('#'+data.args[0].attr("id"));
            
            if(thisNode.find('li').length == 0) {
            
                loadNode(data.args[0].attr("id"));
           
            }
        }
 
ShashankShashank (Salesforce Developers) 
How about posting it on the github project itself? https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit/issues