Loading DataTables with RequireJS in CakePHP: Issue with DebugKit
我已重新编辑此问题，以使其尽可能简洁。我希望这不会打扰你。
我的主要问题是 jquery 插件数据表在我的 requirejs 设置中没有正确加载。 (v1.9.4)
我也在尝试使用 DT_bootstrap(它将数据表扩展到引导程序)。当我运行我的页面时，控制台总是告诉我 DT_bootstrap 失败，因为 $.fn.dataTable 没有定义。问题不能在 DT_bootstrap 中，因为我不需要它来运行数据表，如果我从我的应用程序中删除它，错误仍然是一样的。
我在这里读到 requirejs 还没有准备好正常加载 requirejs，但我发现有些人最终成功实现了它，其中大多数以不同的方式实现。到目前为止，我发现的示例都没有对我有用。
错误：”未捕获的类型错误：无法读取未定义的属性 \\’defaults\\'”(DT_bootstrap.js)
typeof $.fn.dataTable 未定义，它应该是一个函数…
在我决定在我的应用程序中实现 requirejs 之前，我的一个脚本 (general.js) 正在检查是否有任何具有类 “datatable” 的表，当它们存在时，我会异步运行 datatables 脚本，这很好用.
我宁愿保持这种方式，这样我就不会在我的所有应用程序页面中加载数据表代码，但它不起作用。我得到完全相同的错误，就好像我试图用 requirejs 加载它一样。
这是我的”数据主”脚本：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
require.config({
paths: { “jquery”:“../vendor/jquery/jquery”, // 1.9.1 “jquery.cookie”:“../vendor/jquery.cookie/jquery.cookie”, “bootstrap”:“../vendor/bootstrap/docs/assets/js/bootstrap”, // 2.3.2 “bootstrap-timepicker”:“../vendor/bootstrap-timepicker/js/bootstrap-timepicker”, “jqueryui”:“jquery-ui-1.10.3.custom.min”, “datatables”:“jquery.dataTables”, // 1.9.4 “datatables-bootstrap”:“DT_bootstrap”, “modernizr”:“../vendor/modernizr/modernizr”, “general”:“general” }, shim: { “jquery”: { “exports”: ‘jQuery’ }, “jquery.cookie”: { “deps”: [“jQuery”], “exports”: ‘jQuery’ }, “bootstrap”: { “deps”: [‘jQuery’], “exports”: ‘jQuery’ }, “bootstrap-timepicker” : { “deps”: [‘jQuery’, ‘bootstrap’] }, “datatables”: { “deps”: [‘jQuery’] }, “datatables-bootstrap”: { “deps”: [‘jQuery’, ‘datatables’, ‘bootstrap’] }, “jqueryui”: { “deps”: [‘jQuery’] }, “general”: { “deps”: [‘jQuery’, ‘bootstrap’] } } }); require( |
还请注意：
这就是我运行 require.js 的方式：<script type=”text/javascript” src=”/js/require.js” data-main=”/js/app.js”>(注意 javascript 文件夹的路径以 “/” 开头)
如果我删除 “datatables” 和 “datatables-bootstrap” 我的应用程序运行没有任何错误
在我的 general.js 中，我还有其他异步运行 jquery 插件的条件(除了数据表之外的所有工作)
示例：如果日历元素存在，则通过 $.getScript()
加载 jquery 插件日历脚本
用户 dcodesmith 最近试图帮助我(检查他的答案)并要求我在我的应用程序中尝试他的配置，但没有成功。然后我尝试在一个简单的网站中使用它，它适用于那个简单的应用程序，但在我的 cakephp 应用程序中没有发生同样的情况，其中 javascript 文件夹被引用为 “/js”。我发现的主要区别是：在他的应用程序中，所有文件都在同一个文件夹中，而我的应用程序不会发生这种情况(可能与第 1 点有关)。
我也尝试过使用 “exports”: ‘jQuery.fn.dataTable’ 甚至 “exports”: ‘jQuery.fn.dataTable’ 或 “exports”: ‘$.fn.dataTable’… 都没有成功
作为测试，如果我从我的配置中删除两个数据表脚本，然后我运行 $.getScript() 文件加载成功，但 jquery 插件仍未定义($.fn.dataTable)，因此我仍然不能使用它
- 顺便说一句，我使用的是 1.9.4 版数据表
- 因此，在这两个版本中，您都没有使用 require() 加载 general.js 吗？这看起来是个问题。
- 请在每个 require / define 调用上方添加注释，说明它所在的源文件。
- 我不确定我是否理解你的问题，但我想你想知道上面在 paths:{} 中描述的文件的路径
- 我正在询问包含 require 或 define 函数调用(或对 require.config 的调用)的任何文件的路径。这些调用在哪些文件中？有多少文件包含这些调用？另外，请参阅我的第一个问题。
- @LynHeadley，这两个版本都不起作用。这些是我从 html 加载的同一文件的 2 个版本(或尝试)，如下所示 <script type=”text/javascript” data-main=”main.js” src=”/vendor/requirejs/require.js”>
- @LynHeadley，实际上，当我说这两个版本都不起作用时，我只是在谈论加载数据表，因为其他一切在这两种情况下都可以正常工作
- 不确定我可以提供帮助，因为缺少详细信息。我要说的一件事是，在同一个文件中看到两个要求和一个定义是很奇怪的。通常每个都在自己的文件中。另外，我不明白你在用 general.js 做什么，我不认为你想要它。
- 实际上定义不应该在那里，它是我刚刚测试过的东西(我将它改回要求)。 General.js 是一个脚本，我在其中进行一些 DOM 操作。在我的第一个示例中，general.js 中最重要的细节是我检查任何具有类 “datatable” 的表，并且仅当存在任何此类表时，我才使用 $.getScript(‘jquery.dataTables.min.js’).fail(function({ console.log(‘datatables failed loading’) }) 启动数据表脚本，这在以前是有效的我实现了requirejs，但不是现在。显然脚本运行但 $.fn.Datatable 没有得到定义
- 你还需要这方面的帮助吗？我想我有适合你的解决方案
- 不幸的是仍然遇到同样的问题
- 1. 您的脚本标签定义中不需要前导 \\’/\\’。 2. 在你的 require 语句中，在 jQuery 之后加载 dataTables
- 1. 我需要斜杠，因为在我的 php 应用程序中，我有自定义 url，引用 js 文件夹的唯一方法是定义来自网站根目录、”/js” 或 “/vendor” 的路径或”/css”。 2.还是有同样的问题
是的，所以我所做的就是从下往上开始，让裸机配置正常工作。
app.js
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
require.config({
paths: { “jquery”:“jquery-1.10.2”, “datatables”:“jquery.dataTables-1.9.4.min”, “DT-bootstrap”:“DT_bootstrap” }, shim: { “datatables”: { “deps”: [‘jquery’] }, “DT-bootstrap”: { “deps”: [‘datatables’] } } }); require([“jquery”,“datatables”, ‘DT-bootstrap’], function () { $(‘#table_id’).dataTable( { }); |
index.html
|
1
2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html>
<html> <head> <link rel=“stylesheet” type=“text/css” href=“http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css”/> <script type=“text/javascript” data–main=“app.js” src=“require.js”> DataTable Bootstrap </head> <body> <table id=“table_id”/> </body> |
文件夹结构
更新：使用下面的垫片并要求下面的声明
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
shim: {
“jquery.cookie”: [“jquery”], “bootstrap”: [‘jquery’], “bootstrap-timepicker” : [‘jquery’, ‘bootstrap’], “datatables”: [‘jquery’], “datatables-bootstrap”: [‘datatables’, ‘bootstrap’], “jqueryui”: [‘jquery’], “general”: [‘jquery’, ‘bootstrap’] } require( |
- 我得到同样的错误，Uncaught TypeError: Cannot read property ‘fn’ of undefined, 在 DT_bootstrap 上失败，因为它没有正确加载数据表。 $.fn.dataTable 未定义为函数
- 您是否准确地复制并粘贴了这里的内容？
- 对，就是这样。我什至下载了jquery 1.10.2，但我需要使用1.9.1
- 您使用的是哪个浏览器？
- chrome firefox Opera ie8 safari，所有这些都失败了
- 好的，我会尽力帮助你完成这项工作。进入 Chrome 开发工具的控制台并输入 $.fn.DataTable 并告诉我你是否看到了什么
- 让我们在聊天中继续讨论
- 使用这个 “datatables”: { “deps”: [‘jQuery’], “exports”: ‘jQuery.fn.dataTable’ },
我终于找到了问题的根源。
我重新创建了一个与我的 cakephp 应用程序具有相同类型的路由和文件夹的网站，我终于找到了一些东西。
我在 CakePHP 中使用了一个名为 DebugKit 的调试插件，该插件在文档末尾附加了 2 个脚本。其中之一是 jQuery 1.8.1 和插件脚本，它基本上是一个类似于水平导航的工具栏。
我总是被告知不要担心删除这个 jQuery 实例，因为它是以非冲突方式加载的，碰巧一旦我禁用它，我的 requirejs 配置终于可以按照我的意愿使用插件数据表了！
我不知道为什么这个冲突的确切原因，但我很确定它来自这部分代码：
https://github.com/cakephp/debug_kit/blob/master/webroot/js/js_debug_toolbar.js#L59-73
我以前从未注意到这一点，因为我只在管理部分使用数据表插件，并且当我以管理员身份登录时，php 调试器插件始终处于打开状态。
我将更改标题以包含 cakephp，可能对遇到相同问题的人有用
- 感谢您的回答，我在使用 requirejs 加载轮播插件时遇到了同样的问题：slick.js。看到您的回答后，我尝试禁用调试模式并且它可以工作。但是，您有什么解决方案可以在使用 requrejs 时启用调试工具包吗？
来源：https://www.codenong.com/21183535/
