'jsTree: Uncaught TypeError: $(...).jstree is not a function when .jstree functions are called

Good day, I know this question has been asked multiple times before, and I have tried all the suggestions on those posts (this includes the ones in jsTree Github Discussions as well as the jsTree Google group), but I haven't been able to resolve my issue.

I have jquery 3.2.1 and jstree.min.js imported before my <script> containing my tree:

<script src="/Scripts/jquery-3.2.1.js"></script>
<script src="/Scripts/jstree/jstree.min.js"></script>
<script>
    $('#jstree').jstree({
        'core': {
            'themes': {
                'responsive': false,
                'multiple': false,
            },
            'data':
                @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(tree))
        },
        "types": {
            "default": {
                "icon": "glyphicon glyphicon-folder-open"
            }
        },
        "ui": {
            "select_limit": 1,
        },
        "plugins": ["wholerow", "types", "checkbox", "ui", "crrm", "sort"],
        "checkbox": {
            "three_state": false,
            "real_checkboxes": true,
            "whole_node" : false,  // to avoid checking the box just clicking the node 
            "tie_selection" : false // for checking without selecting and selecting without checking
        }
    });

My tree works and I can pull data from it like so:

$('#jstree')
    // listen for event
    .on('changed.jstree',
        function(e, data) {
            var i, j, r = [];
            var id = [];
            for (i = 0, j = data.selected.length; i < j; i++) {
                r.push(data.instance.get_node(data.selected[i]).text);
                id.push(data.instance.get_node(data.selected[i]).id);
            }

            $.ajax({
                *ajax stuff*
            });
        });

Then, whenever I try to use .jstree to use a function, I get the error Uncaught TypeError: $(...).jstree is not a function:

$('#jstree')
    // listen for event
    .on('check_node.jstree',
        function(e, data) {
            var selectedNodes = $("#jstree").jstree().get_checked();  // Error gets thrown here
            console.log(selectedNodes);

            console.log(data.node.id);

            if (selectedNodes.length > 1) {
                $("#jstree").jstree().uncheck_node(selectedNodes[0]);
            }
        });

I have also tried passing true as a parameter: $("#jstree").jstree(true).get_checked(); But I still get the same error.

Any help would be greatly appreciated!

Update Issue was caused by conflicts in my layout page that somehow rendered jstree to not be a function.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source