jsTree

jsTree

so I have here a jsTree instance, which is working fine. I'm dynamically storing datasets (with jquery .attr() and .data() ) in the list items, the html set is precoded (no loading via ajax or whatever).

the structure looks like this:

<ul> <li>Node1 <ul> <li>Node2 <ul> <li data-material-id="bpch1u1">Leaf 1</li> <li data-material-id="bpch1u2">Leaf 2</li> </ul> </li> </ul> </li>

<button type="button" class="btn btn-primary" onclick="openMaterial($(this))">Open Material now</button>

while listening to an external script, the button is provided with a data-material attribute. The attribute is set correctly and i am able to read it.

what i want now is that on click of the button openMaterial() it should open the corresponding leaf with data-material-id= button-material

my function looks like this:

function openMaterial(el) { //get treenode with material id var node = $('li[data-material-id="' + el.data('material') + '"]'); }

node holds an jQuery object after the call, but sadly its empty (holding the body). I believe this is because any not-opened nodes or leafs of the jsTree are not in the DOM. Means even if I open them and close them again, or load them they don't appear in the DOM.

I tried the jsTree functions open_all and load_all and they seem to work, but i still can't get the leaf. is there another option to get the corresponding leaf with just the data-attribute?