Can I display/create jsTree on button click?

I have a div id="result" that I use to display results of users actions. I put there plain text and html too. Aft开发者_开发百科er each user action this div is overwritten with new results.

Now I want to display inside this div an instance of jsTree I have working jsTree that loads nicely on page load but it doesn't load after <div id="tree"></div> is inserted inside my result div.

I tried two lines below but none worked.

 $("#tree").jstree("loaded");  
 $("#tree").jstree("refresh"); 

Any idea how to make the jsTree to be displayed a after button click? Please play on jsfiddle where you can see one tree already and I want another to be displayed after clicking the button. I am after the tree not the text.

I think I need to reload or refresh the tree after I place jstree div inside html.

tree2 was not created in the first place since <div id="tree2"> was not there when you call '$("#tree2").jstree'.

So when you press the button, first tree is correctly refreshed but tree2 is not shown for the reason above.

At button pressed, you have to recreate tree2 by calling '$("#tree2").jstree', or you can just hide <div id="tree2"> when you call $("#tree2").jstree. I just updated your fiddle ( http://jsfiddle.net/fmn6g/10/) so you can try.

To make it happen on a Button Click, just do this:

<script type="text/javascript">
$(document).ready(function() {
$('#button-id').click(function() {
 $("#tree").jstree("loaded");  
 $("#tree").jstree("refresh"); 
});
});
</script>

Remember to change button-id to the actual id of the button.

Hope this helps.