jsTree - Opening AND checking a node

jsTree - Opening AND checking a node

I've spent hours trying to do something simple, I really hope someone can help!

I've got a lazy-loading jsTree using json and checkboxes. I want a script to expand a node, and then tick one of its children. I can do these separately, but not together.

Here's what I've got to expand a parent node:

  1. <!-- Expand a node at the first level -->
  2. jQuery("#demo").bind("loaded.jstree", function (event, data) {
  3.   $('#demo').jstree("open_node","#d_24");
  4. }

If, on the line after line 3, I add code to tick one of the children of node #d_24:

  1. $('#demo').jstree("check_node","#d_245");
The expanding code works fine, but no nodes get checked.
 
On the other hand, this second piece of code works perfectly if I move it to a button's click event. It also works if I bind it to the open_node.jstree event, but it means that all my ticked nodes get re-ticked if the user manually expands another node.

So, it seems that the check_node is happening too fast, before the ajax has done its job loading parent "#d_24".

I have tried using jstree's initially_open parameter, but it seems to do nothing.

Please help! Full code below.

Many thanks,
Peter.

  1. <script type="text/javascript" src="http://localhost/js/jsTreev10rc2/jquery.jstree.js"></script>


  2. <!--The Tree-->
  3. <form action="#"  id="form1" method="post">
  4.     <div id="demo" class="demo"></div>
  5.     <input type="submit" value="Click me when you're done"/>
  6. </form>


  7. <!--JQuery code for the tree-->
  8. <script type="text/javascript" >
  9.     $.jstree._themes = "http://localhost/js/jsTreev10rc2/themes/";




  10. jQuery("#demo").bind("loaded.jstree", function (event, data) {
  11. // Expand
  12. $('#demo').jstree("open_node","#d_24");
  13. $('#demo').jstree("open_node","#d_333");
  14. // Check a child of 24
  15. $('#demo').jstree("check_node","#d_245");
  16. });


  17.     
  18.     jQuery("#demo").jstree({
  19.         "plugins" : [ "json_data","cookies","themes","checkbox" ],
  20.         "json_data" : {
  21.                         "ajax" : {
  22.                                 "url" : function(n) {
  23.                                     id = n.attr ? n.attr("id").replace("d_","") : -1;
  24.                                     return "http://localhost/lookupservice/" + id + "/";
  25.                                 }
  26.                         }
  27.                 },
  28.         "themes" : {
  29.                 "theme" : "rt",
  30.                 "dots" : true,
  31.                 "icons" : true
  32.         },
  33.         "initially_open" : ["d_24"]
  34.     });
  35. </script>