How jsTree instances identify to which DOM element they are tied?

[arnvidhr]

Hello, we used two instances of jsTree in our project and all was fine, but I needed to add one more instance and now, somehow I getting refresh method as undefined from specific jsTree instance, while trees itself working, if not this.

We don't use ids with DOM elements at all, as we are using own made JavaScript front-end framework, where we developing using real JavaScript classes, how we getting programming very similar like for instance on .NET, where we store rendered DOM element jQuery object as such class member, in order to reduce performance costs for all the time searching of such DOM elements by for instance ID. Same as we store specific created jsTree instance as such class member, but I started to wonder, that maybe jsTree very needs that DOM id attribute? I don't know how it identify specific its instance...

Our code looks like this (this is pseudo code, real code is way more complex):

class OurTreeWrapper {
 specificClassMethod() {
  this.jqThis = $('<div>'); // ...creation of new DOM element, without an id, as usual..
  this.jsTree = this.jqThis.jstree(params); // creation of jsTree
  if($.isFunction(this.jsTree.refresh))
    alert('[this.jsTree.refresh] function not found!');

  // If we need to access specific tied to our class DOM element, we just call this.jqThis, for instance: this.jqThis.val(); it works fine
  // Such approach works fine for several years with many outside components and regular jQuery stuff. No problems in long run.
 }
}

Let's say, we have several instances of OurTreeWrapper class.

And it worked fine pretty long time, with such style initialization, but after I added one more tree, jsTree, refresh method started to be undefined on all of instances, while those all trees itself working... I wonder, maybe I need to add unique Id to DOM element or somehow to specify some unique identifier for specific jsTree instance, maybe it messes up with them or something else happening, but after its creation, we capture and save its instance at its OOP class... It has unique identifier as key only for its state module.

[arnvidhr]

What is interesting, that currently works one of approaches, which not worked for me just at the morning:

    /**
     * Refresh whole JsTree
     */
    refresh = () => {

        var memberRefreshOk = $.isFunction(this.jsTree.refresh);
        var trueRefreshOk = $.isFunction(this.jqThis.jstree(true).refresh);
        var emptyRefreshOk = $.isFunction(this.jqThis.jstree().refresh);

        if(memberRefreshOk) {
            this.jsTree.refresh();
            console.log('member refresh worked!'); 
        } else if(trueRefreshOk) {
            this.jqThis.jstree(true).refresh();
            console.log('true refresh worked!');
        } else if(emptyRefreshOk) {
            this.jqThis.jstree().refresh();
            console.log('empty refresh worked!');
        } else {
            console.warn('None of refresh ways works!');
        }
    }

Now it started to work with "true refresh" somehow... So I'll leave such code just in order to check for further issues or other its cases. Somehow I suspect browser for this issue as well.

[arnvidhr]

It seems that it was fault not of this component, sorry for distraction. We sort of had large globalized tree, and when was added one more such tree, some static ties started to mess up, probably unrelated with jsTree itself issue. I closing this issue. Sorries!