Help with Alternative JSON format to populate jsTree

[Cathryn Crane]

I'm really confused on how to use this with Ajax/Webmethods.  I'm sure I'm missing some little detail but I've been staring at this for so long, I'm not getting anywhere.

I am trying to populate a jsTree from a webmethod as many people I've seen do.

I call a webmethod populateTree with 2 parameters.  (I'm not using the parameters yet since I can't even get this to work.  Ideally, the parameters is the name of the object calling the method and the node it wants)

WebMethod:

[WebMethod]
        public static string populateTree(string imgID, int node)
        {

string nodevalues = "";

nodevalues = nodevalues + "{\"id\" : \"ajson1\", \"parent\" : \"#\", \"text\" : \"Commodity\"},";

            nodevalues = nodevalues + "{\"data\" : \"2\", \"parent\" : \"#\", \"text\" : \"Control Station\"},";
            nodevalues = nodevalues + "{\"data\" : \"3\", \"parent\" : \"#\", \"text\" : \"Build Plan Projects\"},";

return nodevalues;

}

Here is my ajax:

function getRootNode(thisID, node) {
     
       
        $.ajax({
            type: "POST",
            url: "jsonPlayground.aspx/populateTree",
            data: "{'imgID':'" + thisID + "', 'node': '" + node + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                showtree1(msg.d);

            },
            error: function () {
                alert('Something happened');
            }
          
        })
 
    }

And my jsTree function:

 function showtree1(nodes) {
            $("#jstree_demo_div").jstree({
        "core" : {
            "data": [
                nodes
       //         { "id": "ajson1", "parent": "#", "text": "Simple root node" },
       //{ "id": "ajson2", "parent": "#", "text": "Root node 2" },
       //{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
       //{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
            ]
       
        },
              
           
          
            "plugins" : [ "themes", "json_data" ]
        });


    }

Notice that the commented out format is the exact format that I'm passing to 'nodes'.  I've hardcoded it instead of passing the string and it works fine.

What am I missing?

HELP!

Thanks!

Cathryn

[Ivan Bozhanov]

You have an extra comma in the data you return, also it must be an array - so you need to surround it with square brackets. Building JSON as a string is a very bad practice - that is why your code is not working - it simply is not valid JSON.
Read up on what JSON is, how to validate it and how to build it.

Best regards,
Ivan

[Cathryn Crane]

Thank you. 

 

I've looked through a bunch of different ways to return the data to my call in the .js file including using JsonConvert.SerializeObject(dataset).

 

This doesn't work either. 

 

The other kicker is I'm forced to use IE8 in which any of the examples that pull the data for the jsTree dynamically don't load.  They just sit with the loader spinner.

[Ivan Bozhanov]

I am certain all demos on jstree.com work on IE8, and the ones on jsfiddle can work if XDR is enabled, which has little to do with jstree, I believe it is even mentioned in the fiddle comments. I am not familiar with building valid JSON in .NET but a lot of the guys here use .NET and have no problem - maybe ask around? I can assure you that if you feed valid JSON to jstree it will work (even in IE8)

Best regards,
Ivan