Populate a jsTree with a JSON string returned by an ASP.NET web method.

[Cranial Entropy]

I am trying to get a jsTree to be populated by JSON returned by an
ASP.NET web method. I am not sure what I am doing wrong as the tree is
rendered with one node and the node's text is the JSON string returned
from the web method.

The JSON update code is as follows:
"json_data" : {
"ajax" : {
"type": "POST",
"contentType": "application/json;",
"url" : "/jsTree.aspx/GetTreeViewNodes",
"data" : function (node) {
return '{ "operation" : "get_children", "id" : 1 }';
},
"success" : function(retval) {
if (retval.hasOwnProperty('d')){
return (retval.d);
}
}
}
},

The web method simply returns a JSON string for now:

[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static string GetTreeViewNodes(int id)
{
return "[{ \"data\" : \"A node\", \"children\" : [ { \"data\" :
\"Only child\", "
+ "\"state\" : \"closed\" }], \"state\" : \"open\" }, \"Ajax node
\" ]";
}

Any idea what is going wrong?

[Ivan Bozhanov]

I guess you are using 1.0rc, and not the latest commit? Just add
"dataType" : "json", to the AJAX config :) this is done automatically
in the latest commit :)

Cheers,
Ivan

> --
> You received this message because you are subscribed to the Google Groups "jsTree" group.
> To post to this group, send email to jst...@googlegroups.com.
> To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/jstree?hl=en.
>
>

[Cranial Entropy]

Hi Ivan,

Thanks for your response. You are correct, I am using jsTree 1.0-rc1.
I have made the change you suggested but unfortunately it is not
working for me. The node's text is still set as the JSON string

returned from the web method.

The JSON update code looks like this now:

"json_data" : {
"ajax" : {
"dataType" : "json",

"type": "POST",
"contentType": "application/json;",
"url" : "/jsTree.aspx/GetTreeViewNodes",
"data" : function (node) {
return '{ "operation" : "get_children", "id" : 1 }';
},
"success" : function(retval) {
if (retval.hasOwnProperty('d')){
return (retval.d);
}
}
}
},

[vakata]

Sorry about that. I really cannot think of any other reasons related
to jstree - maybe you should check exactly what your server returns
and if it is valid JSON ... for example use a tool like firebug. Or
give me a live URL and I can do that for you and help you pinpoint the
problem.

Cheers,
Ivan

On 18 Юни, 11:05, Cranial Entropy <cranial.entropy.b...@gmail.com>
wrote:

[Coriollis]

Hello Guys,

I have the same problem with ASP Net. I tried to debug a little bit
into js and I have the feeling that it is a bug. I got the string
returned by my method in asp net in debug mode and I went to json
verifier on web and it was valid. However the java script it says is
not. Also the example from the download using the json file is not
loading either. Ivan please check the download maybe something is
missing or not latest.

Best Regards

> > > Ivan- Hide quoted text -
>
> - Show quoted text -

[vakata]

Did you add "dataType" : "json" to the AJAX config, or try using the
latest commit.

Cheers,
Ivan

On 21 Юни, 18:01, Coriollis <mihail.milit...@gmail.com> wrote:
> Hello Guys,
>
> I have the same problem with ASP Net. I tried to debug a little bit
> into js and I have the feeling that it is a bug. I got the string
> returned by my method in asp net in debug mode and I went to json

> verpeifier on web and it was valid. However the java script it says is

[Coriollis]

yes I have the data type as json.
<script type="text/javascript">
$(function() {
$("#demo2").jstree(
{
"plugins": ["themes", "json_data"],
"json_data": {
"ajax": {

"type": "POST",
"contentType": "application/json;

charset=utf-8",
"url": "./TreeData.aspx/GetData",
"dataType": "json",
"data": function(node) {

return '{ "operation" :
"get_children", "id" : 1 }';
},
"success": function(retval) {
if (retval.hasOwnProperty('d')) {
return (retval.d);
}
}
}
}

});
});
</script>

This is my script.
My server methods returns
[{"data" : "A node","state" : "closed" },{"attr" : {"id" :
"li.node.id" },"data" : {"title" : "Long format demo","attr" :
{"href" : "#" } } }]
which I checked is looking like a valid json format.

Please advice

On Jun 21, 1:29 pm, vakata <ivan.bozha...@gmail.com> wrote:
> Did you add "dataType" : "json" to the AJAX config, or try using the
> latest commit.
>
> Cheers,
> Ivan
>
> On 21 Юни, 18:01, Coriollis <mihail.milit...@gmail.com> wrote:
>
>
>
> > Hello Guys,
>

> > I have the same problem withASPNet. I tried to debug a little bit

> > into js and I have the feeling that it is a bug. I got the string

> > returned by my method inaspnetin debug mode and I went to json

> > > - Show quoted text -- Hide quoted text -

[vakata]

Your script returns JSON exactly in the required format, so lose:

"success": function(retval) {
if (retval.hasOwnProperty('d')) {
return (retval.d);
}
}

or modify it like this:

"success": function(retval) {
if (retval.hasOwnProperty('d')) {
return (retval.d);
}

return retval;
}

Cheers,
Ivan

[Cranial Entropy]

Hi Ivan,

I will put up a sample project online when I get some time and send
you the link. I also tried changing the success function to this:

"success" : function(retval) {
if (retval.hasOwnProperty('d')){
return (retval.d);
}

return retval;
}

but it is still not working.

[Cranial Entropy]

Hi Ivan,

I finally got around to putting up a test page that shows the problem
I am having:
http://www.timcollins.ie/test/jstree/jstree/Default.aspx

The tree nodes should populated through the call to GetTreeViewNodes()
in Default.aspx which simply returns the JSON string "[{ \"data\" :
\"A node\", \"children\" : [ { \"data\" : \"Only child\", \"state\" :
\"closed\" }], \"state\" : \"open\" }, \"Ajax node\" ]". The JSON
string is rendered as a tree node rather than an actual string.

If you could take a look and see if you can spot the problem that
would be great!

[vakata]

Hi, this is valid JSON, but actually - it is a string. Instead of
this:
{"d":"[{ \"data\" : \"A node\", \"children\" : [ { \"data\" : \"Only

child\", \"state\" : \"closed\" }], \"state\" : \"open\" }, \"Ajax
node\" ]"}

you need this:
{"d":[{ "data" : "A node", "children" : [ { "data" : "Only child",
"state" : "closed" }], "state" : "open" }, "Ajax node" ]}

Or you could (but I do not advise this) use eval. But you'd be better
off correcting the JSON returned.

Kindest regards,
Ivan

On 11 Юли, 19:45, Cranial Entropy <cranial.entropy.b...@gmail.com>
wrote:

[Cranial Entropy]

Hi Ivan,

The " character is escaped with a \ in the string that gets returned
from the web method. Where do you see them appearing in the
JavaScript? I have checked the value of retval.d and it appears as I
would expect - (this is the result from pasting into jsonlint.com)
[
{

"data" : "A node",
"children" : [
{
"data" : "Only child",
"state" : "closed"
}
],
"state" : "open"
},
"Ajax node"

]

I also tried the alternate syntax for defining a string where an @
character is added at the start and each quote character is doubled
and the JSONLint output is the same.

[vakata]

This address:

http://www.timcollins.ie/test/jstree/jstree/Default.aspx/GetTreeViewNodes

Returns this:

{"d":"[{ \"data\" : \"A node\", \"children\" : [ { \"data\" : \"Only
child\", \"state\" : \"closed\" }], \"state\" : \"open\" }, \"Ajax
node\" ]"}

Which jstree dislays correctly as a string. To use actual JSON - lose
the quotes before [ and after ], or use eval. If it is still unclear -
use a tool like firebug to see what your service returns and correct
the values returned.

Cheers,
Ivan

On Jul 15, 10:57 pm, Cranial Entropy <cranial.entropy.b...@gmail.com>
wrote:

[Cranial Entropy]

Hi Ivan,

Thanks for your response. I figured out what was wrong. What was
confusing was that the issue wasn't with the tree itself but rather
the way the .NET WebMethod was dealing with JSON data. The issue seems
to be that .NET serialised the string being returned from the
WebMethod so the jsTree treated it as an actual string rather than a
JSON object and helpfully added extra double quotes.

As you said, a quick fix is to use eval() so in my code above,

if (retval.hasOwnProperty('d')){
return (retval.d);
}

becomes:

if (retval.hasOwnProperty('d')){
return (eval(retval.d));
}

There are a few different discussion threads about this issue on Stack
Overflow. This one was the most useful:
http://stackoverflow.com/questions/2998455/asp-net-webmethod-returns-json-wrapped-in-quotes

On Jul 16, 3:49 pm, vakata <ivan.bozha...@gmail.com> wrote:
> This address:
>
> http://www.timcollins.ie/test/jstree/jstree/Default.aspx/GetTreeViewN...

[JeffV]

I have the following call to the jsTree plugin:

$(function () {
$("#demo").jstree(

{
"plugins": ["themes", "json_data"],
"json_data": {
"ajax": {

"type": "POST",
"contentType": "application/json;

charset=utf-8",
"url": "../webServices/myTestWS.asmx/
testMethodTV",
"dataType": "json",
"success": function (retval) {

if (retval.hasOwnProperty('d')) {
return (eval(retval.d));
}

return retval;
}
}
}
});
});


My JSON data is:

{"d":{"__type":"myJQueryTestBed.treeviewList","rows":
[{"data":"index","state":"closed"},{"data":"position
2","state":"closed"}]}}

I get the Loading... label when the webservice is being called but
after the webservice returns the treeview doesn't appear. What am I
doing wrong?



On Jul 20, 3:47 am, Cranial Entropy <cranial.entropy.b...@gmail.com>
wrote:
> Hi Ivan,
>

> Thanks for your response. I figured out what was wrong. What was
> confusing was that the issue wasn't with the tree itself but rather
> the way the .NET WebMethod was dealing with JSON data. The issue seems
> to be that .NET serialised the string being returned from the
> WebMethod so the jsTree treated it as an actual string rather than a
> JSON object and helpfully added extra double quotes.
>
> As you said, a quick fix is to use eval() so in my code above,
>
>   if (retval.hasOwnProperty('d')){
>         return (retval.d);
>   }
>
> becomes:
>
>   if (retval.hasOwnProperty('d')){
>         return (eval(retval.d));
>   }
>
> There are a few different discussion threads about this issue on Stack

> Overflow. This one was the most useful:http://stackoverflow.com/questions/2998455/asp-net-webmethod-returns-...

[JeffV]

I've been following this thread I I think I followed what @Cranial
did.

Here is my calling code:

$(function () {
$("#demo").jstree(
{
"plugins": ["themes", "json_data"],
"json_data": {
"ajax": {

"type": "POST",
"contentType": "application/json;

charset=utf-8",
"url": "../webServices/myTestWS.asmx/
testMethodTV",

"dataType": "json",

"data": function (node) {
return '{ "operation" :
"get_children", "id" : 1 }';
},
"success": function (retval) {

if (retval.hasOwnProperty('d')) {
return (eval(retval.d));
}
}
}
}

});
});

According to fireBug my JSON data looks like this:

{"d":"data: 1. Pre Lunch (120 min),data: 2. Lunch (30 min),data: 3.
Post Lunch (120 min)"}

However, after the webservice is called I get this message in firebug:

missing ; before statement
return (eval(retval.d));

Any ideas as to what I am doing wrong?

Thanks,

Jeff

[Cranial Entropy]

Your JSON data looks different to mine which may have something to do
with it.
Where I have "[{ "data" : "A node", "children" : [ { "data" : "Only

child", "state" : "closed" }], "state" : "open" }, "Ajax node" ]"

you have {"d":"data: 1. Pre Lunch (120 min),data: 2. Lunch (30

min),data: 3.Post Lunch (120 min)"}

It seems like data should be wrapped in double quotes, as should each
node name.

[vakata]

Use valid JSON and follow the node format.
This is what you should return:
[
{ "data" : "1. Pre Lunch (120 min)" },
{ "data" : "2. Lunch (30 min)" },
{ "data" : "3. Post Lunch (120 min)" }
]

Kindest regards,
Ivan

[JeffV]

Does it have anything to do with this?

"data": function (node) {
return '{ "operation" : "get_children", "id" : 1 }';

I'm not sure what this does?






On Jul 21, 12:49 am, Cranial Entropy <cranial.entropy.b...@gmail.com>
wrote:

[JeffV]

The JSON data I displayed on the post was copied directly from the
POST from FireBug (after it called the webservice). I'm not sure what
you mean, use valid JSON... I thought that the webservice returns
valid JSON because in my webservice I have the following above my
function:

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
<WebMethod()> _

[vakata]

Hi,

maybe someone with .net experience can help you. Yes, what you get is
valid JSON, but not in the format required by jstree (it is described
in the docs). What you get from the service is simply the result,
wrapped in quotes and a "d" property.

In my previous post I described how it should look like. Or even - use
the method described by Cranial - use eval, although it is not
desired. But if you go for eval your json should look like this:

{"d":"\"data\": \"1. Pre Lunch (120 min)\",\"data\": \"2. Lunch (30
min)\",\"data\": \"3.Post Lunch (120 min)\""}

Kindest regards,
Ivan