Mutiple Trees on the Same page not rendering nodes with same id. 3.0Beta

[sto...@rarecrowds.com]

I have two trees on the same page, in different divs with different Ids. I have two json variables, say tree1Data and tree2Data.

If the two JSON objects have entries with the same id, only the first tree will render the conflicting node. The second tree will have that node missing.

Any ideas? Is there a singleton for storage under the scenes?

Example below (Note that Id 1 will only show in the first tree.

           var measures = [
                       { "id": "1", "parent": "#", "text": "Stuff1" },
                       { "id": "200", "parent": "#", "text": "Stuff2" },
                       { "id": "300", "parent": "#", "text": "Stuff" },
                       { "id": "400", "parent": "#", "text": "Stuff" },
                       { "id": "500", "parent": "#", "text": "Stuff" },
                       { "id": "600", "parent": "#", "text": "Stuff" },
                       { "id": "700", "parent": "#", "text": "Stuff" },
                       { "id": "800", "parent": "#", "text": "Stuff" },
                       { "id": "900", "parent": "#", "text": "Stuff" },
                       { "id": "1000", "parent": "#", "text": "Stuff" },
                       { "id": "1100", "parent": "200", "text": "Stuff*" },
                       { "id": "1200", "parent": "200", "text": "Stuff*" },
                       { "id": "1300", "parent": "500", "text": "Stuff" },
                       { "id": "1400", "parent": "500", "text": "Stuff" },
                       { "id": "2300", "parent": "1400", "text": "Stuff" },
                       { "id": "3500", "parent": "1400", "text": "Stuff" },
                       { "id": "3600", "parent": "1400", "text": "Stuff" },
                       { "id": "3700", "parent": "1400", "text": "Stuff" }
            ];
            var treeConfig = {
                'core': {
                    'theme': { "variant": "small" },
                    'data': measures
                },
                'plugins': ["checkbox", "wholerow", "sort"],
                'checkbox': { "three_state": true }
            };
            var geoTree = $("#geoTree").jstree(treeConfig);



var tree = $('#tree').jstree({
                'core': {
                    'theme': { "variant": "small" },
                    'data': [
                       { "id": "1", "parent": "#", "text": "Age"},
                       { "id": "2", "parent": "#", "text": "Gender" },
                       { "id": "3", "parent": "#", "text": "Education" },
                       { "id": "4", "parent": "#", "text": "Employment" },
                       { "id": "5", "parent": "#", "text": "Family Composition" },
                       { "id": "6", "parent": "#", "text": "Financial Attributes" },
                       { "id": "7", "parent": "#", "text": "Housing Attributes" },
                       { "id": "8", "parent": "#", "text": "Language" },
                       { "id": "9", "parent": "#", "text": "Marital Status" },
                       { "id": "10", "parent": "#", "text": "Military Status" },
                       { "id": "11", "parent": "2", "text": "Male*" },
                       { "id": "12", "parent": "2", "text": "Female*" },
                       { "id": "13", "parent": "5", "text": "Expecting" },
                       { "id": "14", "parent": "5", "text": "Age of Children" },
                       { "id": "23", "parent": "17", "text": "Age 05-10 - Children" },
                       { "id": "35", "parent": "17", "text": "Age 00-02 - Infants" },
                       { "id": "36", "parent": "17", "text": "Age 02-05 - Toddlers" },
                       { "id": "37", "parent": "17", "text": "Age 10-19 - Tweenager / Teenager" }

                     ]
                },
                'plugins': ["checkbox", "wholerow", "sort"],
                'checkbox': { "three_state": true }
            });

[Ivan Bozhanov]

The IDs are used internally for DOM IDs, so make sure they are different and valid ID / NAME tokens (in your case - prefix with a different letter for each instance).

[sto...@rarecrowds.com]

Thanks Ivan, that is something I can do, seems like internally the domIds could be prefixed to ensure the scoping too.

It is a bit of a pain on the client for me to ensure my Ids are unique, these ids come from an external service where we don't have control and by design the each different list could have data that appears in others.

I will see if I can come up with a good solution to change the ids back and forth on the client.

[Ivan Bozhanov]

If you are using AJAX - use the dataFilter config option (standard jQuery), in that function you can get the data and modify it before jstree processes it:
dataFilter : function (data) {
   data = JSON.parse(data);
   // do stuff with data
   return JSON.stringify(data);
}

Or you could use jstree's option to specify a function as "data" - in that function you can do anything - make an AJAX call, get the data, modify it, and THEN call the callback function which passes the modified data to jstree:
"data" : function (node, callback) {
   // "this" (scope) here is the actual instance
   $.ajax(...).done(function (data) {
       // do stuff with data
       callback(data); // feed to jstree
   });
}

Best regards,
Ivan

[sto...@rarecrowds.com]

Thanks good hint!

[Daron]

Similar situation.  Upgraded from the old jstree libraries to jstree 3.  It's been a surprisingly difficult transition.  In the old jstree, I had two trees on the same page without problem, duplicate node IDs were allowed between trees (when the two different tree views happened to contain a reference to the same object), and each tree could have its own selection.  Trying with jstree 3-beta-5 and 3-beta-7, I am able to get the two trees to display all nodes by forcing unique IDs on the references, but here's the problem:

• When I do $('#Tree1').jstree('select_node', '#Tree1Node1'), node 1 is selected on Tree 1.
• When I then do $('#Tree2').jstree('select_node', '#Tree2Node1'), node 1 is selected on Tree 2 but deselected on Tree 1.

Not sure why this would be a problem.  Side note: I am actually using jstree('select_node', <node>, true) with suppress_event = true to avoid using the select handlers that fire when someone manually clicks a node.  But it seems the select handlers are firing anyway, which could be part of the issue.  Still investigating, but very open to guidance...

[Ivan Bozhanov]

jstree IDs are used as DOM IDs, so because IDs are identifiers - they are supposed to be unique on page level. You are not supposed to have two elements with the same ID on the same page - it is bad practice, bad markup and leads to problems. Make sure your IDs are unique or let jstree generate them.

[Daron]

As I mentioned, I am forcing unique IDs, but that's not the crux of the question.  If you look at the examples I posited, the IDs are unique.  But when I select #Tree2Node1 on #Tree2, it deselects #Tree1Node1 on #Tree1.  Why is this happening and how do I fix it?  That's the question.

[Ivan Bozhanov]

Sorry - I misread your question. Share your config and data so that I can reproduce, I can not reproduce using only what you ahve shared so far.
Thank you.