2

I'm trying to display a jstree containing sections and the pages that they contain. I've set up a type for each but I can't get the icon to change for the page type, it just keeps displaying the default folder icon.

This is my javascript:

$('#demo1').jstree({ 
        "themes" : {
            "theme" : "default",
            "dots" : false,
            "icons" : true
        },
        "types" : {
            "section" : {
                "max_children"  : -1,
                "max_depth"     : -1,
                "valid_children": "all",
                "type_attr"     : "section"
            },
            "page" : {
                "max_children"  : 0,
                "max_depth"     : -1,
                "valid_children": "none",
                "icon" : { 
                        "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
                    },
                "type_attr"     : "page"
            }
        },
        "core" : {"html_titles" : true,  "load_open" : true },
        "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort", "types" ],
        "json_data" : {
            "ajax" : {
                "type": 'GET',
                "url" : function (node) { 

                    var url = ""

                    if (node == -1)
                    {
                        url = 'localhost/sections';
                    }
                    else
                    {
                        url = 'localhost/sections/'+node.attr("id");
                    }

                    return url;
                },
                "type" : "get",  
                "success" : function(items) {

                  data = []

                  for (i in items) {

                    var item = items[i]
                    var type;

                    if (JSON.stringify(items[i].root)) {

                        type = "section";

                        node = {
                        "data" : item.title, 
                        "attr" : { "id" : item.id, "rel" : type }, 
                        "state" : "closed"
                        }

                    } else {

                        type = "page";

                        node = {
                        "data" : item.title, 
                        "attr" : { "rel" : type }, 
                        "state" : "open"
                        }
                    }

                    this.set_type(type, node);
                    data.push(node);

                  }

                return data; 

            }
        }
    }
});

This is the HTML generated by the AJAX call.

<div id="demo1" class="demo jstree jstree-0 jstree-focused jstree-default" style="height:100px;">
   <ul class="jstree-no-dots">
      <li id="1" rel="section" class="jstree-open">
         <ins class="jstree-icon">&nbsp;</ins><a href="#" class="jstree-clicked"><ins class="jstree-icon">&nbsp;</ins>One</a>
         <ul>
            <li id="3" rel="section" class="jstree-closed"><ins class="jstree-icon">&nbsp;</ins><a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>One Subsection</a></li>
            <li rel="page" class="jstree-open jstree-last"><ins class="jstree-icon">&nbsp;</ins><a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>Page in section one</a></li>
         </ul>
      </li>
      <li id="2" rel="section" class="jstree-closed jstree-last"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Two</a></li>
   </ul>
</div>

Can anyone see what's going wrong?

Any advice appreciated.

Thanks

2 Answers 2

1

Not sure if this answer is still useful but I've been having similar problems with jsTree and I found your question

Aare you sure this config is right? You have:

    "types" : {
        "section" : {
            "max_children"  : -1,
            "max_depth"     : -1,
            "valid_children": "all",
            "type_attr"     : "section"
        },
        "page" : {
            "max_children"  : 0,
            "max_depth"     : -1,
            "valid_children": "none",
            "icon" : { 
                    "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
                },
            "type_attr"     : "page"
        }

I think it should be

    "types" : {
        "type_attr"     : "rel",            // you can remove this. the rel attribute is the default
        "types"         : {
            "section"   : {
                "max_children"  : -1,
                "max_depth"     : -1,
                "valid_children": "all"
            },
            "page" : {
                "max_children"  : 0,
                "max_depth"     : -1,
                "valid_children": "none",
                "icon" : { 
                        "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
                    }
            }
        }

Notice that the Types object contains some properties (the type_attr option) and it also contains a nested Types property which includes each type.

Based on the docs I've read, the jsTree lib looks in the type_attr and gets the node's value and compares it to the list of values in Types.Types

1

for those here using 3.0, its different now.

from this issue: https://github.com/vakata/jstree/issues/497

The type is not read off of the rel attribute. Try using <li data-jstree='{ "type" : "floor" }'... in your markup (and keep the single quotes outside, and the double quotes - inside for the data-jstree attribute).`

so the key is

<li data-jstree='{ "type" : "section" }'>...</li>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.