jQuery Forum

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?