creating node dynamically with class jstree-closed

1,258 views
Skip to first unread message

jlo...@opensistemas.com

unread,
Jun 28, 2017, 12:50:18 PM6/28/17
to jsTree
Hi experts.

I have created and configure a jstree which is displayed perfectly.

I use the AJAX method population in order to fill the children data. I have a root tree and whenever a user clicks on the "arrow" icon to expand.. it is made an ajax request which returns and string output in format "<ul><li.../li></ul>".. that means i do not use JSON  population to fill the tree when its created. Until here everything is ok.

But the problem that I have is when i create dynamically a new element using the function jQuery('#jstree_teams').jstree('create_node', '#', {text:"text", id:"1234", icon:"dashicons dashicons-groups", state:"opened"}); The element is ok created but THERE IS NO ARROW TO EXPAND, and becuase of that i cannot call the ajax request to fill the children of this new element.

If I create the element by this way jQuery('#jstree_teams').jstree('create_node', '#', {text:"text", id:"1234", icon:"dashicons dashicons-groups", children:[{text:"hijo1", id:"hijo1", icon:"dashicons dashicons-groups"}]}); The element is ok created AND EXISTS AN arrow, but when I click in this arrow...loads the children that i previously givenn, and the AJAX request is not called too.

According to the DOC, if you want to create elements with the capacity to have children in the future you have to add the class="jstree-closed" to the element. I have made this, by this way
jQuery('#jstree_teams').jstree('create_node', '#', {text:element.title, id:element.uid, icon:element.icon, li_attr:{class:"jstree-closed"}}); But with no results.

What I want is create a node dynamically, adding to the root element and bind the element to the AJAX request population, just the same to other elements that have been created in tree definition. I would apreciate any help. I have been looking for this in google, but it seems nobody has my problem.

I want to do this because my Content Server gives me the info in a PAGINATED WAY.. That means each time a user clicks on an arrow to expand, the server gives me only 15 elements and if there are more... I have to make another request and create dynamically those new elements.. If someone knows another method to approach the paginated option in order to populate the tree please tell me

I paste the code for future relevenaces. Thanks for all

jQuery('#jstree_teams').jstree({
        "core" : {
            'data' : {
                'url' : '/wp-admin/admin-ajax.php'
                'type' : 'post',
                'data' : function (node) {
                    return {
                        'id' : node.id,
                        'init': 'teams',
                        'action' : 'expandapichildren'
                    };
                },
            },
            "check_callback": true
        }
    });

jQuery('#jstree_teams').on("select_node.jstree", function (e, data) {
            var page = entityId.split("page")[1];
            jQuery.ajax({
                url: "/wp-admin/admin-ajax.php",
                type: "post",
                data: {
                    entitytype: entityType,
                    page : page,
                    init: 'teams',
                    action: "expandmoreapichildren",
                },
                success: function(data) {
                    jQuery('#jstree_teams').jstree('delete_node', jQuery('#jstree_teams').jstree('get_selected'));
                    data.forEach(function(element){
                        //jQuery('#jstree_teams').jstree('create_node', '#', {text:element.title, id:element.uid, icon:element.icon, li_attr:{class:"jstree-closed"}});
                        //jQuery('#jstree_teams').jstree('create_node', '#', {text:element.title, id:element.uid, icon:element.icon, children:[{text:element.title, id:element.uid, icon:element.icon}]});
                    });
                    //jQuery('#jstree_teams').jstree('create_node', '#', {text:"LOTY IS HERE", id:"lotyid", icon:"dashicons dashicons-groups", children:[{text:"hijo1", id:"hijo1", icon:"dashicons dashicons-groups"}]});
                    jQuery('#jstree_teams').jstree('create_node', '#', {text:"LOTY IS HERE2", id:"lotyid2", icon:"dashicons dashicons-groups", state:"opened"});
                }
            });
    });


Thanks for your time



Reply all
Reply to author
Forward
0 new messages