How to load child node in jsTree

Question

Hello everyone,

Sorry for my poor English, my system want to change javascript tree from KoolTreeView to jsTree and I read the document and implement it. The result is something like this

Food

* Fish
* Beef
* Chicken

my javascript and div code

<script class="source" type="text/javascript">
 $(function () {
  $("foodtree").jstree({
   "core" : { "initially_open" : [ "root" ] },
   "html_data" : {
     "ajax" : {
       "url" : "menu/menu/listfoodtree"
      }
   },
   "plugins" : [ "themes", "html_data" ]
  });
 });
</script>';

<div id="foodtree"></div>

About url of “menu/menu/listfoodtree” created plain html:

<li id="root"><span>Food</span>

<ul>
<li id="food14"><a href="menu/menu/listfish/1">Fish</a></li>
<li id="food13"><a href="menu/menu/listbeef/1/13">Beef</a></li>
<li id="food1"><a href="menu/menu/listchick/11">Chicken</a></li>
</ul>

</li>

the result displayed correctly (with jsTree) and my ideal want to click the item to load child node like this

# Food

    * Fish (href='/menu/menu/listfish/1')
      * Tuna
      * Salmon 
    * Beef
    * Chicken

and now I have the url “/menu/menu/listfish/1” created plain html:

<li id ='fish44'><span>Tuna</span></li>
<li id ='fish66'><span>Salmon</span></li>

but I don't know how to implement it, to click the Fish and display the child node from url. Could you give me any suggestion or guidance?