tree loaded via ajax/json not refreshing icon on leaf nodes

[Christopher Fales]

I am using jstree v3 with ajax (lazy) loading of nodes from flat json.

I start by loading the root nodes, setting children=true, so that their child nodes will load when selected.

I then click on a root folder to load its child nodes. Click on a child node, to load its children, etc.

Everything is working fine until I get to a leaf node (it is a leaf node that has not had its data retrieved yet, so the tree doesn't know it is a leaf node yet).

When I click on the leaf node to expand it, the ajax request is made, no data is returned and my code is returning an empty array [] indicating there are no children.

The progress spinner hides as it should, but then the + symbol remains visible, making it appear that the leaf node does have children.

If I inspect the properties of the leaf node it does indicate true for is_leaf()

Also, if I collapse the parent node of the leaf and expand it, the plus symbol is gone from the leaf node (as it should be).

So the issue seems to be that the leaf node display is just not refreshing appropriately after the data is returned and its properties updated.

I have tried calling redraw() and redraw_node() without success.

An excerpt of my configuration is here;

jQuery(targetid).jstree({

"core" : {

"animation" : false,

"check_callback" : function(operation, node, node_parent, node_position){

return true;

},

"multiple" : false,

"themes" : {

"dots" : true,

"responsive" : false

},

"data" : function (obj, cb) {   //-- performs the retrieval of tree data

if(obj.id == "#"){

//-- function loads the libraries (top level) for the tree

parentobject.LoadLibraries(cb);

}else if(obj.data && obj.data.NodeType && obj.data.NodeType == "library"){

parentobject.LoadChildFolders(obj, cb); //-- loads sub folders beneath the selected library

}else if(obj.data && obj.data.NodeType && obj.data.NodeType == "folder"){

parentobject.LoadChildFolders(obj, cb); //-- loads just the selected node sub folders

}

}

},

"sort" : function (a, b) { //-- sort nodes alphabetically except for recycle bin which goes to the end

var anode = this.get_node(a);

var bnode = this.get_node(b);

var aisrc = (anode.data && anode.data.FolderID && anode.data.FolderID.indexOf("RCBIN") == 0);

var bisrc = (bnode.data && bnode.data.FolderID && bnode.data.FolderID.indexOf("RCBIN") == 0);

sortorder = (aisrc ?  1 : (bisrc ? -1 : (anode.text.toLowerCase() > bnode.text.toLowerCase() ? 1 : -1)));

return sortorder;

},

"conditionalselect" : function (node) {  //-- to stop selection of a node put code here

return true;

},

"contextmenu" : {

"select_node" : false,

"items" : function(node){return parentobject.BuildContextMenu(node)}

},

"plugins" : ["contextmenu", "sort", "conditionalselect", (parentobject.ShowCheckBoxes)? "checkbox" : ""]

})

.on('ready.jstree', function (e, data){  //-- respond to tree completed loading

parentobject.IsLoading = false;

})

.on('load_node.jstree', function (e, data) {  //-- respond to node load data event

})

.on('select_node.jstree', function (e, data) {

if(parentobject.ignoreevent == true){

parentobjectignoreevent = false;

}else{

parentobject.ClickFolder(); //-- respond to select node event

}

})

.on('rename_node.jstree', function (e, data){

parentobject.NewFolderName = data.text;

if(! data.node.data){  //-- newly created node, need to post to server

if(data.old != data.text){  //-- newly created folder name was changed

parentobject.FinishCreateFolder(data);

}else{    //-- newly created folder was not renamed so remove the node

parentobject.jstree.delete_node(data.node);

}

}else{ //-- a rename of an existing folder

if(data.old != data.text){  //-- folder name was changed

parentobject.FinishRenameFolder(data);

}

};

parentobject.NewFolderName = "";

parentojbect.NewNodeID = "";

parentobject.StoreSelectedNode();

});

In my LoadChildFolders function if no data is returned for the url request (ie. no children exist) then I am passing data back to the callback function as follows;

cb.call(this, []);

As I say, everything is working fine, except for the repaint/refresh of the + indicator on the (now) leaf node.

Thanks for any input/ideas.

Chris

[Christopher Fales]

This problem appears to only affect IE. In both Firefox and Chrome, the leaf node is refreshing properly. 

[Christopher Fales]

In IE, the list item class of the leaf node is staying set to jstree-closed rather than jstree-leaf, until the parent node is collapsed and reopened.

In FF/Chrome the class is being updated right away.

[Christopher Fales]

Managed to work around the problem with a bit of a kluge.

Just before I return the empty array back to the call back function to indicate that there are no children, I manually refresh the DOM classes of the node.

//-- following is a hack to resolve an issue in IE browser in which the leaf node display is not updating properly

var domNode = parentobject.jstree.get_node(parentnode.id, true);

domNode.addClass('jstree-leaf').removeClass('jstree-closed');

//-- the above is a hack to resolve an issue in IE browser in which the leaf node display is not updating properly

cb.call(this,[]); //-- return empty array to indicate no children

[Ivan Bozhanov]

Thank you for reporting, I will look into this right away - I created an issue in the bug tracker too:
https://github.com/vakata/jstree/issues/964

I will keep you posted, I hope to fix this in a few hours.

Best regards,
Ivan

[Ivan Bozhanov]

Which version are you using - testing with the latest code I cannot reproduce the issue. I believe it was fixed a while back.
If you are using the latest - make sure you are not using IE in compatibility or quirks mode.

Best regards,
Ivan