Question

我有一个包含jsTree对象和jqGrid对象的ASP.NET用户控件。直接嵌入页面时，控件可以正常工作。

然而，当我将控件置于Ektron小部件编辑器控件中时，我遇到了问题。我得到了一个＆＃34;未捕获的TypeError：undefined不是一个函数＆＃34;加载树时。

HTML看起来像：

<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>

JavaScript如下：

$('#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');
});

工作页面和非工作页面中加载的脚本是：

<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>

错误发生在行 - $('#jstree_demo_div').jstree({

上

任何帮助都将不胜感激。

干杯，斯图尔特。

Answer 1

听起来jstree JS文件没有被加载，因此浏览器无法理解jstree（）是什么。我会检查Chrome中的“网络”标签，确保所有JS文件都已加载。如果没有，请使用Chrome中的控制台标签查看是否存在任何阻止jstree工作的早期错误。

你可能还会发现你正在加载2个jQuery库（一个来自Ektron和你自己的一个），所以这可能会阻止jQuery正常工作。如果是这样，请删除您自己的。

通过将您的代码添加到Ektron小部件中，您将JS代码添加到其他JS代码的加载中。不可避免地存在冲突。使用Chrome的控制台或Firefox的Web Developer工具栏将有助于追踪它们。

Answer 2

在小部件中工作时，通常使用Ektron API注册脚本是个好主意：

// for CSS files
Ektron.Cms.Framework.UI.Css.Register(this, "~/css/widgetstyle.css");

// for JS files
Ektron.Cms.Framework.UI.JavaScript.Register(this, "~/Includes/js/jquery.dropkick.js");
Ektron.Cms.Framework.UI.JavaScript.Register(this, "~/Includes/js/whitespace.js");
// etc.

这将确保您的脚本仅在页面上一次，即使页面上放置了多个窗口小部件实例。但是，这会将脚本标记放在文档的<head>中，所以要小心，特别是如果要将其他脚本放在页面底部。

Answer 3

我同意rf_wilson正在加载两个jQuery副本。 jstree被添加到一个副本然后当您引用$时，您正在引用没有加载jstree的副本。

一个简单易用的方法是在行$.noConflict()之前立即致电$('#jstree_demo_div').jstree({

这会将$变量分配给jQuery的另一个副本。

＆＃34;未捕获的TypeError：undefined不是函数＆＃34;在Ektron小部件编辑器中加载jstree时出错

3 个答案: