jsTree – loading subnodes via ajax on demand

by

Irishka pointed me in the right direction, but does not fully resolve my problem. I fiddled around with her answer and came up with this. Using two different server functions is done only for clarity. The first one lists all products at top level, the second one lists all children of a given productid:

jQuery("#introspection_tree").jstree({
    "plugins" : ["themes", "json_data", "ui"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                var nodeId = "";
                var url = ""
                if (node == -1)
                {
                    url = "http://localhost/introspection/introspection/product/";
                }
                else
                {
                    nodeId = node.attr('id');
                    url = "http://localhost/introspection/introspection/children/" + nodeId;
                }

                return url;
            },
            "success": function (new_data) {
                return new_data;
            }
        }
    }
});

The json data returned from the functions is like this (notice the state=closed in each node):

[
  {
    "data": "Kit 1",
    "attr": {
      "id": "1"
    },
    "state": "closed"
  },
  {
    "data": "KPCM 049",
    "attr": {
      "id": "4"
    },
    "state": "closed"
  },
  {
    "data": "Linux BSP",
    "attr": {
      "id": "8"
    },
    "state": "closed"
  }
]

No static data is needed, the tree is now fully dynamic on each level.

More Related Contents:

  1. Request Monitoring in Chrome
  2. What is the motivation behind the introduction of preflight CORS requests?
  3. jQuery Upload Progress and AJAX file upload
  4. jQuery send string as POST parameters
  5. How to use Simple Ajax Beginform in Asp.net MVC 4? [closed]
  6. Easiest way to retrieve cross-browser XmlHttpRequest
  7. Why use AJAX when WebSockets is available?
  8. Call jQuery Ajax Request Each X Minutes
  9. Google Chrome –allow-file-access-from-files disabled for Chrome Beta 8
  10. Why the cross-domain Ajax is a security concern?
  11. ASP.NET MVC Ajax.ActionLink with Image
  12. How to write javascript in client side to receive and parse `chunked` response in time?
  13. $.ajax call working fine in IE8 and Doesn’t work in firefox and chrome browsers
  14. Retrieve Facebook Fan Names
  15. Form submit in conditionally rendered component is not processed
  16. Set-Cookie on Browser with Ajax Request via CORS
  17. jQuery mobile $(document).ready equivalent
  18. Setting processData to false in jQuery breaks my AJAX request
  19. Detecting AJAX requests on NodeJS with Express
  20. Jquery ajax form submit that contains files
  21. In javascript, how can I uniquely identify one browser window from another which are under the same cookiedbased sessionId
  22. How to hide ajax requests from firebug console?
  23. Using the HTTP Range Header with a range specifier other than bytes?
  24. Web sockets make ajax/CORS obsolete?
  25. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
  26. How to store to browser auto-complete/auto-fill when using AJAX calls
  27. Conditionally provide either file download or show export validation error message
  28. phonegap: cookie based authentication (PHP) not working [webview]
  29. Angular 2 HTTP Progress bar
  30. Update div using ajax.beginform inside asp mvc view

Leave a Comment