AJAX data binding

[Mohammad Zakir Hussain]

hi,

Can anyone help me to get AJAX data binding to JSTree.

<script type="text/javascript">    

$(function() {

    $.ajax({

        async : true,

        type : "GET",

        url : "FetchCOA",

        dataType : "json",    

        success : function(json) {

        alert(json);

            createJSTrees(json);

        },    

        error : function(xhr, ajaxOptions, thrownError) {

            alert(xhr.status);

            alert(thrownError);

        }

    });

});    

function createJSTrees(jsonData) {

    $("#container").jstree({

        "json_data" : {

            "data" : jsonData

        },

        "plugins" : [ "themes", "json_data", "ui" ]

    });

}    

</script>

My Servlet "FetchCOA" return as below JSON data

--------------------------------------------------------------------

[{"id":"17","text":"BBB-Currency Master","parent":"#"},{"id":"1","text":"AED-United Arab Emirates Dirham","parent":"17"},{"id":"2","text":"AUD-Australia Dollar","parent":"17"},{"id":"3","text":"CHF-Switzerland Franc","parent":"17"},{"id":"4","text":"GBP-United Kingdom Pound","parent":"17"},{"id":"5","text":"INR-India Rupe","parent":"17"},{"id":"16","text":"AAA-Chart Of Accounts","parent":"#"},{"id":"6","text":"A06-Sales Invoice","parent":"16"},{"id":"7","text":"A07-Receipts","parent":"16"},{"id":"8","text":"A08-Payments","parent":"16"},{"id":"9","text":"A09-Cash Sales","parent":"16"},{"id":"10","text":"A10-Opening Balances","parent":"16"},{"id":"11","text":"A11-Sales Return","parent":"16"},{"id":"12","text":"A12-Payroll Postings","parent":"16"},{"id":"13","text":"A13-Fixed Assets","parent":"16"},{"id":"14","text":"A14-Forex Journal Voucher","parent":"16"},{"id":"15","text":"A15-Purchase Return","parent":"16"}]

Thanks in advance.... 

[Alejandro Grigera]

What version of jstree are you using? I dont recognize the 'json_data' plugin is it a custom plugin or a very old one.

if you are using the latest version of jstree I can give you an example with Ajax and lazy loading.

Best regards

[Mohammad Zakir Hussain]

hi,

Thank you very much Alejandro for replying to my query, I'm using latest version which is 3.3.1

Regards,

Mohammad

[Alejandro Grigera]

This a working tree from a project:

    $('#tree').jstree({
        'core' : {
            "multiple" : true,
            "themes" : { "stripes" : true },
            "data" : function (node, cb) {
                var jsonvar  = {};
               
                jsonvar["name"] = field_name;
                jsonvar["ws_function"] = "available_fields_tree";
               
                $.ajax({
                    url: url_webservice,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(jsonvar)
                })
                .done(function(data) {
                    console.log("Open available fields tree: ", data);
                    cb(data);
                })
                .fail(function(err) {
                    console.log(err.responseText);
                });
            }
        },
        "search": {
            "show_only_matches" : true,
        },
        "types": {
            "#" : {
                "valid_children" : [""],
            },
            "field" : {
                "max_children" : 0,
                "icon" : "./Images/file-icon.png",
                "valid_children" : [""]
            },
            "field_folder" : {
                "icon" : "./Images/folder_green.png",
                "valid_children" : ["field"]
            },
            "default" : {
                "icon" : "./Images/Folder.png"
            }
        },
        "plugins" : [ "sort", "types", "wholerow", "dnd", "search", "changed" ]
    });

[Mohammad Zakir Hussain]

hi Alejandro,

After applying Ajax binding create new node is not working

$('#Create').on("click", function () {

  var ref = $('#container').jstree(true);

  var SNo=UniqueNo();

  var Code=$('#AcCode').val().trim();

  var Desc=$('#AcDesc').val().trim();

  sel = ref.get_selected();

  var node = {id:SNo,text:Code+" "+Desc};

  $('#container').jstree('create_node', sel, node, 'last');

});

[Alejandro Grigera]

The function should work like this:

$('#container').jstree().create_node(sel, node, 'last');

You also have to be sure a node is selected when you clik on #Create, and if you are using types and have any restrictions you should set the type of the new node otherwise will go as default, and may not be allowed in the parent node.

Hope this helps
Best regards

[Mohammad Zakir Hussain]

hi Alejandro,

First of all I would like to thank you for your help...

Please let me know how to set type while creating new node...

Types:

"types" : {

"#" : {

"max_children" : -1,

"max_depth" : -1,

"valid_children" : ["root"]

},

"root" : {

"icon" : "images/folder.png",

"valid_children" : ["default"]

},

"default" : {

"valid_children" : ["default","file"]

},

"file" : {

"icon" : "images/file.png",

"valid_children" : []

}

},

Creating New Node:

$('#container').jstree().create_node(sel, node, 'last');

Note: argument "Sel" is my selected node reference.

JSON Data:

[{"type":"root","id":"17","text":"Currency Master","parent":"#"},{"type":"file","id":"1","text":"AED-United Arab Emirates Dirham","parent":"17"},{"type":"file","id":"2","text":"AUD-Australia Dollar","parent":"17"},{"type":"file","id":"3","text":"CHF-Switzerland Franc","parent":"17"},{"type":"file","id":"4","text":"GBP-United Kingdom Pound","parent":"17"},{"type":"file","id":"5","text":"INR-India Rupe","parent":"17"},{"type":"root","id":"16","text":"Chart Of Accounts","parent":"#"},{"type":"file","id":"6","text":"A06-Sales Invoice","parent":"16"},{"type":"file","id":"7","text":"A07-Receipts","parent":"16"},{"type":"file","id":"8","text":"A08-Payments","parent":"16"},{"type":"file","id":"9","text":"A09-Cash Sales","parent":"16"},{"type":"file","id":"10","text":"A10-Opening Balances","parent":"16"},{"type":"file","id":"11","text":"A11-Sales Return","parent":"16"},{"type":"file","id":"12","text":"A12-Payroll Postings","parent":"16"},{"type":"file","id":"13","text":"A13-Fixed Assets","parent":"16"},{"type":"file","id":"14","text":"A14-Forex Journal Voucher","parent":"16"},{"type":"file","id":"15","text":"A15-Purchase Return","parent":"16"}]

Best Regards,

Mohammad

[Alejandro Grigera]

Ok, first to add type to the node manually you just put it in the node definition:

var node = {id:SNo,text:Code+" "+Desc,type:"file"};

Second, from the JSON I see some files going in the root folder with ID 17 or 16, so you need to put files as valid children of root, watch out with default wich is used like "any other type that is not define"

Third, you have to make sure the nodes you add manually always respect this type definition. The click event you show us doesn't care for type so the selected node could be an invalid one in the type definition.

If you want more help you have to tell us what kind of error or problem you have (eg The tree is incomplete, the new node is not created in the tree,etc) and please let us know if there is any message in the console.

Best regards

[Mohammad Zakir Hussain]

hi,

I tried as per your suggestion by adding type: "file" but still the new nod is not created in the tree.

1) Still no response after adding type:"file" and also tried with icon:"images/file.png"

2)  Id 17 & 16 Doesn't have any parent so, I added parent as "#"

3)  Selected node is valid as I have already tested it.

I'm not getting any error message in console.

If you don't mind i can give you system access thru Teamviewer or Ammyy, Please let me know...

Note: If I remove "types" I'm able to add new nodes manually without any problem.

If you don't mind I can give my system access thru Teamviewer or Ammyy ?

[Alejandro Grigera]

In your Types definition you put:

"root" : {

"icon" : "images/folder.png",

"valid_children" : ["default"]

}

Now if you try to put a File Type node inside a Root type node (ID 16 and 17) it won't work because you are telling the root type node to ONLY accept Default type nodes as children.

If this is what you need you should put it like this:

"root" : {

"icon" : "images/folder.png",

"valid_children" : ["default", "file"]

}

Let me know if this fix the problem.

[Alejandro Grigera]

If everything works fine without the Types plugin and you don't need it, remove it and forget it.

Best regards

[Mohammad Zakir Hussain]

hi,

Actually I want icons to be display parent as folder icon and child as a file icon that's the reason I am using types, Is there any other way to display icons?

Thanks in advance...

Regards,

Mohammad

On Thursday, July 7, 2016 at 2:10:14 AM UTC+5:30, Alejandro Grigera wrote:

[MOHAMMED SADULLAH]

Hello Alejandro ,

             I implemented jstree in my application(ASP.Net). Am searching lazy loading technique , but till now none helped me. All the posts are only regarding client side script. Can you pls help me with both server side and client side script for lazy loading if possible in C# for server side.