preload JSON data, and then use AJAX loading

[Marcin Rim]

Can I open the tree preloaded with static json data, and then use ajax callbacks to load rest of the data,

just like in jstree v1 version code:

$("#tree").jstree({ 
    "json_data" : {
        "data" : [{ 
                "data" : "A node", 
                "state" : "closed"
            },
            { 
                "attr" : { "id" : "li.node.id" }, 
                "data" : { 
                    "title" : "Long format demo", 
                    "attr" : { "href" : "#" } 
                } 
            }],
        "ajax" : { "url" : "/static/v.1.0rc/_docs/_json_data.json" }
    },
    "plugins" : ["json_data"]
}); 

[Ivan Bozhanov]

Yes, simply set "data" to a function:

"data" : function (node, cb) {
  if(node.id == "#") { cb([/*your initial array here */]); }
  else {
    $.ajax({/* ajax config here */}).done(function(d) { cb(d); });
  }
}

Best regards,
Ivan

[Ray Navarette]

You beat me to the reply!

Actually though, I had this problem not too far back.  It was pretty difficult to find the answer.  Not sure how common of a use case it is, but perhaps worth noting that this is done.  Does one of the samples cover using 'data' as a function?

thanks again for all the great work.

[Marcin Rim]

Great thanks, work like a charm :)

[João Fonseca]

Thanks for this answer Ivan.

But i'm still stuck on this :( 

I've changed the data to be a function and yes, my data is shown on screen and when i expand something that isn't loaded, an ajax call is made. And this is where i'm stuck. 

The request is made.. I can see the success of it but no data is displayed.

Shouldn't we use .complete instead of .done? How should i return the data on this ajax request?

$.ajax({

url: 'GetEntityNodes.jsf', 

data: {

id: node.id, 

rand : new Date().getTime()

}

}).done(function(d) { 

cb(d.responseText); 

});

This is how i'm performing my ajax call.. It works but nothing is displayed on scren :(

[Ivan Bozhanov]

add:
"dataType" : "json"
to the AJAX config and in the callback use:
cb(d);

As for complete or done - it is up to you. I prefer the new promises syntax.

Best regards,
Ivan

[Ivan Bozhanov]

Also make sure the JSON you return is in the expected JSON format.

30 април 2014, сряда, 19:28:51 UTC+3, João Fonseca написа:

[João Fonseca]

Hi Ivan,

Sorry on late response.. I was finally able to work on this again..

I'm now getting the response from the server, i've used the complete function on my ajax call. .done doesn't work, don't ask why :)

But now, i'm not stuck on rendering the json downloaded from the server.. It just shows an empty folder. Image below.

The responseText, my d var has this value:

[

    { 

    'id': 'B_4', 

    'parent': 'C_1', 

    'text': 'Building 03', 

    'children': true

},

{ 

    'id': 'F_01', 

    'parent': 'C_1;B_4', 

    'text': '01', 

    'children': true

},

{ 

    'id': 'F_02', 

    'parent': 'C_1;B_4', 

    'text': '02', 

    'children': true

},

{ 

    'id': 'F_04', 

    'parent': 'C_1;B_4', 

    'text': '04', 

    'children': true

}

]

Any ideias??
Regards

[Ivan Bozhanov]

Without an actual demo it is hard for me to help, but it seems to me your structure is not correct - should "01" be under "Building 03"? If so - then "parent" should be set to "B_4", not "C_1;B_4"

best regards,
Ivan

[Sim]

Hi Ivan,

I'm trying to implement the same but with no luck.

Will appreciate if you can please provide some working example for the same.

Thanks!

[Ivan Bozhanov]

Look at the approved answer - that is the working example.

Best regards,
Ivan

[Sim]

Thanks Ivan!

It worked for me.