Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsTree how to change ajax url and reload data

Tags:

jstree

    $('#jstree_demo_div2').jstree({
        'core': {
            'data': {
                "url": "tree.ashx?id=" + _id,
                "dataType": "json" // needed only if you do not supply JSON headers
            }
        },
        "checkbox": {
            'visible': true,
            'keep_selected_style': false, 
        },
        "plugins": ["wholerow", "checkbox"]
    });

I need to change the url (or the variable _id will change) and then refresh data. But there seems to have a cache problem.

I monitored the HTTP request, the request param _id didn't change.

I've tried

'core': {
                'data': {
                    "url": "tree.ashx?id=" + _id,
                    "cache":false, //←←←←
                    "dataType": "json" // needed only if you do not supply JSON headers
                }
            }, 

and it didn't work.

BTW, my jsTree.js version is 3.0.8.

like image 741
wtf512 Avatar asked Nov 04 '14 09:11

wtf512


1 Answers

I am using the following code to test your use case. It's refreshing the jstree without collapsing the whole tree.

<!DOCTYPE html>

<html>
    <head>
        <title>JSTree</title>
        <link rel="stylesheet" href="dist/themes/default/style.css" />
        <script src="dist/libs/jquery.js"></script>
        <script src="dist/jstree.js"></script>
        <script>
            var arrayCollection;
            $(function() {
                arrayCollection = [
                    {"id": "animal", "parent": "#", "text": "Animals"},
                    {"id": "device", "parent": "#", "text": "Devices"},
                    {"id": "dog", "parent": "animal", "text": "Dogs"},
                    {"id": "lion", "parent": "animal", "text": "Lions"},
                    {"id": "mobile", "parent": "device", "text": "Mobile Phones"},
                    {"id": "lappy", "parent": "device", "text": "Laptops"},
                    {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
                    {"id": "dalmatian", "parent": "dog", "text": "Dalmatian", "icon": "/"},
                    {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
                    {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
                    {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
                    {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
                    {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
                    {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
                ];
                $('#jstree').jstree({
                    'core': {
                        'data': arrayCollection
                    },
                    "checkbox": {
                        'visible': true,
                        'keep_selected_style': false
                    },
                    "plugins": ["wholerow", "checkbox"]
                });
            });
            function resfreshJSTree() {
                $('#jstree').jstree(true).settings.core.data = arrayCollection;
                $('#jstree').jstree(true).refresh();
            }
            function addNokia() {
                var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"};
                arrayCollection.push(nokia);
                resfreshJSTree();
            }
            function deleteDalmatian() {
                arrayCollection = arrayCollection
                        .filter(function(el) {
                            return el.id !== "dalmatian";
                        });
                resfreshJSTree();
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="addNokia()" value="Add Nokia"/>
        <input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/>
        <div id="jstree"></div>
    </body>
</html>
  • Note:
  • After opening the above page in a browser, Open all the nodes and child nodes of the jstree.
  • Click on Add Nokia button.
  • It will add Nokia Lumia node to Mobile Phones node without collapsing the tree to root node.
  • Similarly click on Delete Dalmaitian button.
  • And it will delete Dalmatian node from Dogs node and refreshes the tree to display the new structure without collapsing to root node.
like image 184
Quick_Silver Avatar answered Sep 18 '22 22:09

Quick_Silver