Can I display / create jsTree when a button is clicked?

Question

I have a div id="result" , which I use to display the results of user actions. I also added text and html. After each user action, this div is overwritten with the new results .

Now I want to display a jsTree instance inside this div . I have jsTree working, which loads beautifully when the page loads, but it doesn’t "t after <div id="tree"></div> inserted into my div result.

I tried the two lines below, but no one worked.

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

Any idea how to get jsTree to appear after clicking a button ? Please play jsfiddle where you can see one tree, and I want the other to be shown after the button is clicked. I am not a text behind a tree.

It seems to me that I need to reload or refresh the tree after placing the jstree div inside the html.

Answer 1

tree2 was not created because <div id="tree2"> not there when you call '$ ("# tree2"). jstree '.

So, when you click the button, the first tree is updated correctly, but tree2 is not displayed for the reason above.

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

Answer 2

To do this with the click of a button, simply do the following:

 <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 button id .

Hope this helps.