jstree not displaying json data

[vignesh nagarajan]

thsi is my script code in asp.net page

<script type="text/javascript">

    $(document).ready(function () {

       $('#tree').jstree({

           "json_data": {

               "ajax": {

                   "url": "WebService3.asmx/GetAllNodes11",

                   "type": "POST",

                   "contentType": "application/json"

               }

           },

            "success":

           function(msg)

           { alert("hi");

           },

           "themes": {

                "theme": "default",

               "dots": false,

               "icons": true,

                "url": "/content/themes/default/style.css"

            },

            "plugins": ["themes", "json_data", "dnd", "contextmenu", "ui", "crrm"]

        });

               return false;

      

    });

</script>

thsi is my web method

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        [WebMethod]

        public List<G_JSTree1> GetAllNodes11(string id)

        {

            List<G_JSTree1> G_JSTreeArray = new List<G_JSTree1>();

            G_JSTree1 _G_JSTree = new G_JSTree1();

            _G_JSTree.data = "x1";

            _G_JSTree.state = "closed";

            _G_JSTree.IdServerUse = 10;

            _G_JSTree.children = null;

            _G_JSTree.attr = new G_JsTreeAttribute1 { id = "10", selected = false };

            G_JSTreeArray.Add(_G_JSTree);

            G_JSTree1 _G_JSTree2 = new G_JSTree1();

            var children =

                new G_JSTree1[]

            {

                new G_JSTree1 { data = "x1-11", attr = new G_JsTreeAttribute1 { id = "201" } },

                new G_JSTree1 { data = "x1-12", attr = new G_JsTreeAttribute1 { id = "202" } },

                new G_JSTree1 { data = "x1-13", attr = new G_JsTreeAttribute1 { id = "203" } },

                new G_JSTree1 { data = "x1-14", attr = new G_JsTreeAttribute1 { id = "204" } },

            };

            _G_JSTree2.data = "x2";

            _G_JSTree2.IdServerUse = 20;

            _G_JSTree2.state = "closed";

            _G_JSTree2.children = children;

            _G_JSTree2.attr = new G_JsTreeAttribute1 { id = "20", selected = true };

            G_JSTreeArray.Add(_G_JSTree2);

            G_JSTree1 _G_JSTree3 = new G_JSTree1();

            var children2 =

                new G_JSTree1[]

            {

                new G_JSTree1 { data = "x2-11", attr = new G_JsTreeAttribute1 { id = "301" } },

                new G_JSTree1 { data = "x2-12", attr = new G_JsTreeAttribute1 { id = "302" }, children= new G_JSTree1[]{new G_JSTree1{data = "x2-21", attr = new G_JsTreeAttribute1 { id = "3011" }}} },

                new G_JSTree1 { data = "x2-13", attr = new G_JsTreeAttribute1 { id = "303" } },

                new G_JSTree1 { data = "x2-14", attr = new G_JsTreeAttribute1 { id = "304" } },

            };

            _G_JSTree3.data = "x3";

            _G_JSTree3.state = "closed";

            _G_JSTree3.IdServerUse = 30;

            _G_JSTree3.children = children2;

            _G_JSTree3.attr = new G_JsTreeAttribute1 { id = "30", selected = true };

            G_JSTreeArray.Add(_G_JSTree3);

            return G_JSTreeArray;

        }

buy keeping break point in webmethod the call is not made

   

  

   

   

   

[Ivan Bozhanov]

Read the docs please. http://jstree.com has all you need. Just a hint - you are using 1.0 config code with the new 3.0 jstree version - that will not work. What you are doing is described on jstree.com, there are a few demos too ... Even for v.1.0 - your config is broken. To get you started replace this:

           "json_data": {

               "ajax": {

                   "url": "WebService3.asmx/GetAllNodes11",

                   "type": "POST",

                   "contentType": "application/json"

               }

           },
with this:

           "core": {

               "data": {

                   "url": "WebService3.asmx/GetAllNodes11",

                   "type": "POST",

                   "contentType": "application/json"

               }

           },

But make sure you fix the rest of your config too.

Best regards,
Ivan

[vignesh nagarajan]

 i am not getting a clue how to do can u give the code for ajax calling  the jstree. can u send a link of working example

[Ivan Bozhanov]

How about this link: http://www.jstree.com/demo/

[vignesh nagarajan]

 i have to load data from xml file to jstree via ajax 

$('#jstree_demo').jstree({
  "core" : {
    "animation" : 0,
    "check_callback" : true,
    "themes" : { "stripes" : true },
    'data' : {
      'url' : function (node) {
        return node.id === '#' ?
          'ajax_demo_roots.json' : 'ajax_demo_children.json';
      },
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  },
  "types" : {
    "#" : {
      "max_children" : 1, 
      "max_depth" : 4, 
      "valid_children" : ["root"]
    },
    "root" : {
      "icon" : "/static/3.0.0-beta10/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
  "plugins" : [
    "contextmenu", "dnd", "search",
    "state", "types", "wholerow"
  ]
});

in the above code there are two json data files . but i want to know where shld i place my xml file link and in what format the xml file should be

On Tuesday, 18 March 2014 10:51:41 UTC+5:30, vignesh nagarajan wrote:

[Ivan Bozhanov]

v.3 does not support XML - as you can see on the side - only HTML and JSON is supported.
Search this forum - I believe someone ported the original XML plugin for the new version, but it is no longer officially supported.

[vignesh nagarajan]

    $(document).ready(function () {

      $('#tree').jstree({

'core' : {

  'data' : {

    'url' : function (node) {

      return node.id === '#' ? 

        'ajax_roots.json' : 

        'ajax_children.json';

    },

    'data' : function (node) {

      return { 'id' : node.id };

    }

  }

});

     

      });

is this the correct config version for jstree 3.0 

On Tuesday, 18 March 2014 10:51:41 UTC+5:30, vignesh nagarajan wrote:

[vignesh nagarajan]

i am getting loading symbol  in place of tree it even in html code the li is loding . whats the problem

On Tuesday, 18 March 2014 10:51:41 UTC+5:30, vignesh nagarajan wrote:

[Ivan Bozhanov]

Sorry, I do not understand the question. If you are using dynamically generated JSON make sure you return the correct headers - that is all I can think of without seeing your config and data.

[vignesh nagarajan]

$('#jstree_demo').jstree({ "core" : { "animation" : 0, "check_callback" : true, "themes" : { "stripes" : true }, 'data' : { 'url' : function (node) { return node.id === '#' ? 'ajax_demo_roots.json' : 'ajax_demo_children.json'; }, 'data' : function (node) { return { 'id' : node.id }; } } }, "types" : { "#" : { "max_children" : 1, "max_depth" : 4, "valid_children" : ["root"] }, "root" : { "icon" : "/static/3.0.0-beta10/assets/images/tree_icon.png", "valid_children" : ["default"] }, "default" : { "valid_children" : ["default","file"] }, "file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] } }, "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ] });

The same code un the demo the html is rendering as loading

[Ivan Bozhanov]

Do you see it working on http://www.jstree.com/demo ? If so - there is no bug with the tree but with your setup - maybe you are running from a file (address starts with file://) - some browsers do not support AJAX  from the filesystem. Or maybe if you are using a web server you are not serving JSON with the proper headers, maybe you do not have the .json files, there could be 1000 reasons none of which is related to jstree.