Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding data to jqxtree dynimacally on click of nodes of a tree using AJAX call

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.51k
    Comment on it

    There might be a case where user wants to add data to jqxtree on click of each individual node. Below is the code which help us to achieve the above functionality where user can get data from JSON file or database on click of each individual tree node , depending whether parent have child nodes or not.

    <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";
                // Create jqxTree
                var tree = $('#topictree');
                var source = null;
                $.ajax({
                    async: false,
                    url: "topic.php",
                    success: function (data, status, xhr) {
                        source = jQuery.parseJSON(data);
                    }
                });
    
                tree.jqxTree({ source: source, theme: theme, height: 600, width: 400 });
                tree.bind('expand', function (event) {
                    var label = tree.jqxTree('getItem', event.args.element).label;
                    var $element = $(event.args.element);
                    var loader = false;
                    var loaderItem = null;
                    var children = $element.find('ul:first').children();
                    $.each(children, function () {
                        var item = tree.jqxTree('getItem', this);
                        if (item && item.label == 'Loading...') {
                            loaderItem = item;
                            loader = true;
                            return false
                        };
                    });
                    if (loader) {
                        $.ajax({
                            url: loaderItem.value,
                            success: function (data, status, xhr) {
                                var items = jQuery.parseJSON(data);
                                tree.jqxTree('addTo', items, $element[0]);
                                tree.jqxTree('removeItem', loaderItem.element);
                            }
                        });
                    }
                });
            });
        </script>
    
    <div id="topictree">
    </div
    

    Data for root node has to be in following format :

    [{
    "label": "Root", "expanded": "true",
    "items": [
        { "label": "apple", "items": [{ "value": "topic.php", "label": "Loading..." }] },
        { "label": "orange", "items": [{ "value": "topic.php", "label": "Loading..." }] }]
    }]
    

    Data for nodes having child nodes has to be in following format :

    [
    { "label": "apple_1", "items": [{ "value": "topic.php", "label" : "Loading..." } ] },
    { "label": "orange_1", "items": [{ "value": "topic.php", "label" : "Loading..." } ] },
    { "label": "carrot", "items": [{ "value": "topic.php", "label" : "Loading..." } ] }
    ]
    

    If parent have no child nodes data has to be in following format :

      [
    {"label": "orange" },
    {"label": "apple" },
    {"label": "carrot" },
    {"label": "radish" }
    ]
    
    • Please look into the format of data for each node depending on whether they have child nodes or not because format of JSON being returned back differ a bit accordingly.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: