Cannot read property 'length' of undefined

[Martin]

Hi Ivan,

i use jstree 3.0.0-beta2. I get this error "Cannot read property 'length' of undefined" if i use the ajax option. This is my JSON object i get as response.

[{"li_attr":{"isFolder":true,"dn":"o=xxx,c=xxx"},"text":"some text","icon":"/Styles/images/folder.png","id":"node_00","children": "true"}]

Any ideas??

Thanks,

Martin

[Ivan Bozhanov]

"children" : "true" - this is not valid - set this to boolean true (lose the quote marks), not to a string "true". Like so:

"children" : true

[Martin]

Hi Ivan,

true is a boolean. Example above is only a string from chrome debugger. Here is a better example.

[Martin]

Here some more info.

Error occurs in this function at $.each(node.attributes

$.vakata.attributes = function(node, with_values) {
 node = $(node)[0];
 var attr = with_values ? {} : [];
 $.each(node.attributes, function (i, v) {
 if($.inArray(v.nodeName.toLowerCase(),['style','contenteditable','hasfocus','tabindex']) !== -1) { return; }
 if(v.nodeValue !== null && $.trim(v.nodeValue) !== '') {
 if(with_values) { attr[v.nodeName] = v.nodeValue; }
 else { attr.push(v.nodeName); }
 }
 });
 return attr;
 };

[Ivan Bozhanov]

There is something else that is wrong - I have no problem when using your JSON. Check for duplicate IDs, give me your full config & data, so that I can reproduce.

Cheers,
Ivan

[Ivan Bozhanov]

I just commited a "fix", I could not reproduce but I added an if to check if the node is valid and if it has an attributes property.
Try pulling the latest from github.

Best regards,
Ivan

[Martin]

Now it throws "Cannot read property 'ownerDocument' of undefined"

Martin

[Martin]

This is my config

core: { themes: { stripes: false, dots: false, icons: true }, animation: false, data: { url: "/Data/TreeviewNodes", data: function (a) { return { id: a.attr ? a.attr("dn") : 0} },async: true, cache: false, dataType: "json", type: "POST" } }

[Martin]

Hi Ivan,

i've got it. Problem was the response header from my server. I use asp.net mvc 4 for my project. In my Controller i used Newtonsoft.Json.JsonConvert to Serialize my Object to a simple JSON String. The response is 'text/html'. In jstree 1.0 this solution works. But in Version 3.0 i have to use the following method

public JsonResult TreeViewNodes (string id)
{
List<TreeViewitemModel> myNodeList;
Jsonresult json = Json(myNodeList, "text/json", JsonrequestBehavior.AllowGet);
return json;
}

So without this, 

return $.ajax(s)

.done($.proxy(function (d, t, x) {

    var type = x.getResponseHeader('Content-Type');

 var type is allways html, so jstree always try to append html instead of json.

Anyway thanks for your help!!!

Best regards,

Martin

[Bilal Haider]

i have reached this page looking for displaying JSON data received via ASP.NET MVC Action method. The JSON data received via AJAX call was being displayed as a only node of the tree. It was suspected that the data sent as JSON is being treated as HTML which matches with @Martin's remarks related to Content-Type.

Before proceeding with his approach, I just changed the return data from JsonResult to string and strangely, it was displayed properly. 

I am sharing the screenshot for feedback + further reference if anyone else reaches here. 

@Ivan, nice job man and thumbs up for maintaining + supporting the project for soo long.... 

screenshots of the network profiler:

JSON Type Response Header:

Test Type Response Header:

[ for the same data, the content-length get reduced for the String type ]

And here is the Controller code:

public JsonResult CustomerList(int projId, int userId)

{

var lvlObj = new LevelTree();
// variable used for readability 
var result = lvlObj.GenerateTreeJson(db, 1, 1); 
return Json(result, JsonRequestBehavior.AllowGet);

}

public String GetTreeJson(int projId, int userId)

{

var lvlObj = new LevelTree();

return lvlObj.GenerateTreeJson(db, projId, userId);

}

Finally the script of Tree:

$('#treeView').jstree({

'core': {

'data': {

type: "POST",

cache: false,

url: '/Template/GetTreeJson',

contentType: 'application/json; charset=utf-8',

data: JSON.stringify({ projId: 1, userId: 1 }),

dataType: 'json',

success: function (node) {

return { "id": node.id };

},

error: function (msg) {

alert("Error: " + msg.responseText);

}

}

}

});

[ the call to the action returning JsonResult is not included in the code ]