"Uncaught TypeError: undefined is not a function" error when loading jstree inside of Ektron widget editor

Question

I've got an ASP.NET user control that contains a jsTree object and a jqGrid object. the control works fine when embedded directly onto a page.

However I'm running into problems when I place the control inside of an Ektron widget editor control. I'm getting an "Uncaught TypeError: undefined is not a function" when loading the tree.

The HTML looks like:

<table class="men-content-selector">
    <tr>
        <td style="width: 280px;">
            <div id="tree" class="men-tree" style="overflow: auto; width: 280px; height: 340px;">
                <div id="jstree_demo_div"></div>
            </div>
        </td>
        <td style="vertical-align: top;">
            <div class="men-grid" style="overflow: auto; height: 340px;">
                <table id="jqgrid_demo"></table>
            </div>
        </td>
    </tr>
</table>
<button id="select-this-content" type="button">Select Content</button>

The JavaScript as follows:

$('#jstree_demo_div').jstree({
    'core': {
        'data': {
            'url': function (node) {
                return node.id === '#' ?
                    '/HttpHandlers/Folders.ashx?folderId=0' :
                    '/HttpHandlers/Folders.ashx?folderId=' + node.id;
                // return '/HttpHandlers/Folders.ashx?folderId=82';
            },
            'data': function (node) {
                return { 'id': node.id };
            }
        }
    }
}).on('changed.jstree', function (e, data) {
    var nodeId;
    if (data.selected.length == 1) {
        nodeId = data.instance.get_node(data.selected[0]).id;
    }
    $('#folder-id').html('Selected Folder ID: ' + nodeId);
    $("#jqgrid_demo").setGridParam({ url: '/HttpHandlers/FolderContents.ashx?folderId=' + nodeId });
    $("#jqgrid_demo").trigger('reloadGrid');
});

The scripts that are loaded in both the working and non-working pages are:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/Includes/js/jquery.dropkick.js"></script>
<script type="text/javascript" src="/Includes/js/whitespace.js"></script>
<script type="text/javascript" src="/Includes/js/global.js"></script>
<script type="text/javascript" src="/Scripts/rbsmaster.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Includes/js/jqTree/jstree.min.js"></script>
<script type="text/javascript" src="/Includes/js/jqGrid/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Includes/js/jqGrid/jquery.jqGrid.min.js"></script>

The error occurs on the line - $('#jstree_demo_div').jstree({

Any help would be appreciated.

Cheers, Stuart.

Answer 1

It sounds like the jstree JS file is not being loaded hence the browser not understanding what jstree() is. I would check the Network tab in Chrome to make sure all your JS files are loading. Failing that use the Console tab in Chrome to see if there are any earlier errors occuring which are stopping jstree from working.

You may also find that you are loading 2 jQuery libraries (one from Ektron and one of your own) so this may stop jQuery from working properly. If so, remove your own.

By adding your code into an Ektron widget you are adding your JS code into a load of other JS code. Inevitably there are conflicts. Using Chrome's Console or Firefox's Web Developer toolbar will help track them down.