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:
- <!-- Expand a node at the first level -->
- jQuery("#demo").bind("loaded.jstree", function (event, data) {
- $('#demo').jstree("open_node","#d_24");
- }
If, on the line after line 3, I add code to tick one of the children of node #d_24:
- $('#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.
- <script type="text/javascript" src="http://localhost/js/jsTreev10rc2/jquery.jstree.js"></script>
- <!--The Tree-->
- <form action="#" id="form1" method="post">
- <div id="demo" class="demo"></div>
- <input type="submit" value="Click me when you're done"/>
- </form>
- <!--JQuery code for the tree-->
- <script type="text/javascript" >
- $.jstree._themes = "http://localhost/js/jsTreev10rc2/themes/";
- jQuery("#demo").bind("loaded.jstree", function (event, data) {
- // Expand
- $('#demo').jstree("open_node","#d_24");
- $('#demo').jstree("open_node","#d_333");
-
- // Check a child of 24
- $('#demo').jstree("check_node","#d_245");
- });
-
- jQuery("#demo").jstree({
- "plugins" : [ "json_data","cookies","themes","checkbox" ],
- "json_data" : {
- "ajax" : {
- "url" : function(n) {
- id = n.attr ? n.attr("id").replace("d_","") : -1;
- return "http://localhost/lookupservice/" + id + "/";
- }
- }
- },
- "themes" : {
- "theme" : "rt",
- "dots" : true,
- "icons" : true
- },
- "initially_open" : ["d_24"]
- });
- </script>