Styjun

I am using jstree

I build a tree, the leaf nodes contain a href which is then open in an iFrame on the same page. This is done by the function that is bound to whenever a node is selected in the jstree that checks to see if the node has a real href and then amends the iFrame accordingly, otherwise it opens the node.

<div class="container-fluid">
 <div class="row">
 <div class="col">
 <div id='songchanges'>
 <ul>
 <li id='phtml_1'>
 <a href='#'>E:MelcoTestMusicTestMusicTestMusicWAVMusicDead InsideNo.4</a>
 <ul>
 <li id="phtml_2">
 <a href="FixSongsReport00440_body_aBE9p7eQo0baClCFB6BhPQ==.html" 
 target="_blank">
 Flower
 </a>
 </li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 <div class="col-8">
 <iframe id="processingResults" name="processingResults" 
 style="border:none; width:100%;height:500px">
 </iframe>
 </div>
 </div>
</div>




<script>
 $(function ()
 
 $('#songchanges')
 .jstree
 (
 
 'plugins' : ['themes','html_data','ui','cookie'],
 'core' : 'initially_open' : [ 'phtml_1' ] 
 
 )
 .bind('select_node.jstree',
 function (e, data)
 
 var href = data.node.a_attr.href;
 var iframe = document.getElementById("processingResults");
 if(href!='#')
 
 iframe.src = href;
 
 else
 
 $(this).jstree('toggle_node', data.node);
 
 
 );
 
 );
</script>

This works well, but when the the page is first displayed I don't want the iframe to be empty so I would like the jstree to automatically open the first leaf node and trigger the function to load the iFrame.

How do I do this ?

You can use the ready.jstree event handler to select a node after the tree is ready. The select_node function on the tree instance will trigger the select_node event.

$('#songchanges').jstree(
 
 'plugins': ['themes', 'html_data', 'ui', 'cookie'],
 'core': 'initially_open': ['phtml_1'] 
 
).on('select_node.jstree',
 function (e, data) 
 var href = data.node.a_attr.href;
 var iframe = document.getElementById("processingResults");
 if (href != '#') iframe.src = href; 
 else $(this).jstree('toggle_node', data.node); 
 
).on('ready.jstree', function (e, data) 
 var leaf = null;
 var getFirstLeaf = function (id) 
 var node = data.instance.get_node(id); 
 if(node.children.length > 0)
 return getFirstLeaf(node.children[0]);
 
 return data.instance.select_node(id); //Triggers select_node event
 ;
 getFirstLeaf('phtml_1'); // Start from the root node id
);