jsTree not been created when tree-data="scope" about jstree-directive

[liujoey]

please also update the tag and bower file. Currently bower installing a very old version.

[arvindr21]

Fixed. Please check. Also pushed the latest code to bower https://github.com/arvindr21/jsTree-directive/releases/tag/v0.1.3

[arvindr21]

Can you confirm if the updated fix works as expected? I can release a new bower version.

[liujoey]

I left a comment on your last commit, but it seems github doesn't show it anywhere unless you open the commit itself. Well, please allow me copy the comment here.

+          // Trigger it initally
+          // Fix issue #13
+          treeDir.init(s, e, a, config);

the three lines you added here, seems the config object was not assigned to a correct value.

[arvindr21]

I did see the comment and fixed it. Reopened the issue again, so we can track. Ref : 1efa940

[liujoey]

tested, and it's working, thank you for the quick response.

[arvindr21]

Thanks! You use bower version 0.1.4.

[IllyaMoskvin]

Apologies for revisiting this issue, but I had some trouble with jsTree v3.0.9, which I fixed by commenting out the full // Trigger it initally code of this fix. Namely, I had the following error thrown:

Callstack	File
Uncaught TypeError: Cannot read property 'triggerHandler' of null	jstree.js:857
$.jstree.core.trigger	jstree.js:857
$.jstree.core._append_json_data.rslt	jstree.js:1773
(anonymous function)	jstree.js:1802
n.extend.proxy.n.isFunction.e	jquery.min.js:2

I'm using a $resource factory to get data from my API. For reference, the relevant parts of my code look somewhat like this:

angular.isUndefinedOrNull = function(val) {
    return angular.isUndefined(val) || val === null 
}

app.filter('jstree', function() {
    return function( array ) {
        return array.map( function( e, i, a ) {

            // jsTree represents root nodes with parent = #
            e.parent = e.category_id == 0 ? '#' : e.category_id;
            delete e.category_id;

            // See 'Alternative JSON Format'
            // http://www.jstree.com/docs/json/
            e.text = e.title;
            delete e.title;

            return e;

        });
    }
});

$scope.sidebarTree = [ { id: 1, parent: '#', text: 'Loading...' } ];

Category.get({}, function(data) {
    $scope.categories = data.items;
});

$scope.$watch( 'categories', function (newVal, oldVal) {
    if( !angular.isUndefinedOrNull( newVal ) ) {
        $scope.sidebarTree = $filter('jstree')($scope.categories);
    }
});

<js-tree tree-data="scope" tree-model="sidebarTree" ></js-tree>

Basically, I think that jsTree.directive does not play nice when AJAX calls are used to build the model for tree-data="scope". Maybe the issue is on my end, but I wanted to bring this to your attention just in case it's something deeper.

Sorry for the snippet-heavy comment. Please let me know if I should clarify any info.

[arvindr21]

@IllyaMoskvin Thanks. Can you try the below

$scope.$watch( 'categories', function (newVal, oldVal) {
    console.log(newVal, oldVal);
    if( !angular.isUndefinedOrNull( newVal ) ) {
        var _tree = $filter('jstree')($scope.categories);
        console.log(_tree);
        $scope.sidebarTree = _tree;
    }
});

and share the output here?

Thanks.

[IllyaMoskvin]

Certainly. Thanks for the quick response! I truncated the existing table to create a simplified test case and verified that the bug still occurs. I also wrapped each variable inside the console.log() calls in a JSON.stringify() to make copying easier and to avoid running into the "Object state below is captured on first expansion" problem with Chrome. (JavaScript's default of passing non-trivial objects by reference gives me a headache.) Here is the output:

undefined undefined
[{"id":1,"category_id":0,"title":"Root Node"},{"id":2,"category_id":1,"title":"Foo"},{"id":3,"category_id":1,"title":"Bar"}] undefined
[{"id":1,"parent":"#","text":"Root Node"},{"id":2,"parent":1,"text":"Foo"},{"id":3,"parent":1,"text":"Bar"}]
Uncaught TypeError: Cannot read property 'triggerHandler' of null

I hope this helps! Thanks.

Edit[1]: Sorry, I forgot to mention that I changed the Category.get() call to only retrieve the most relevant columns like so:

Category.get({key:'all',select:'id+category_id+title'}, function(data) {
    $scope.categories = data.items;
});

My API URIs are structured according to this model, with entity=categories in this case:

http://.../api/[:entity]/[:key]/[:select]

I have a position column too, but I forgot to retrieve it in this test case.

Edit[2]: Also, I should mention that the tree does work properly in every way, despite the error being thrown.

Edit[3]: Well, I circumvented the aforementioned pass-by-reference by changing the $filter definition to include array = $.extend( true, [], array ); before return array.map(). Sorry, I know it's tangential, but that was the whole point of setting up a $watch, and I forgot to include it in my code. I'll stop with the edits now. This had no effect on the bug in question.

[meriturva]

The same here with versione 0.1.5. The error is always:
Uncaught TypeError: Cannot read property 'triggerHandler' of null

I have fixed removed the line // Trigger it initally mentioned by @IllyaMoskvin
But now with two jsTrees the error start to show again.