jstree - Cannot set icons when using types plugin - jstree

Question

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"> </ins><ins class="jstree-icon"> </ins>One
<ul>
<li id="3" rel="section" class="jstree-closed"><ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>One Subsection</li>
<li rel="page" class="jstree-open jstree-last"><ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>Page in section one</li>
</ul>
</li>
<li id="2" rel="section" class="jstree-closed jstree-last"><ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>Two</li>
</ul>
</div>
Can anyone see what's going wrong?
Any advice appreciated.
Thanks

Answer 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

Answer 2

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>