草庐IT

关于 javascript:Loading DataTables with RequireJS in CakePHP: Issue with DebugKit

codeneng 2023-03-28 原文

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(
    [
       "modernizr",
       "jquery",
       "jquery.cookie",
       "bootstrap",
       "bootstrap-timepicker",
       "jqueryui",
       "general",
       "datatables",
       "datatables-bootstrap"
    ],
    function () {
        //  console.log('something here');
    }
);

还请注意：

  • 这就是我运行 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( {
           "aaData": [
                ['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
                ['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
            ],
           "aoColumns": [
                {"sTitle":"Engine" },
                {"sTitle":"Browser" },
                {"sTitle":"Platform" },
                {"sTitle":"Version" },
                {"sTitle":"Grade" }
            ]
        });

    });

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

    文件夹结构

    更新：使用下面的垫片并要求下面的声明

    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(
        [
           "modernizr",
           "jquery",
           "datatables",
           "datatables-bootstrap"
           "jquery.cookie",
           "bootstrap",
           "bootstrap-timepicker",
           "jqueryui",
           "general"
        ],
        function () {
            //  console.log('something here');
        }
    );

    • 我得到同样的错误，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 时启用调试工具包吗？

    withjavascriptspanclassnbspdatatablesjqueryrequirejs

    有关关于 javascript:Loading DataTables with RequireJS in CakePHP: Issue with DebugKit的更多相关文章

    1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    2. ruby-on-rails - 关于 Ruby 的一般问题 - 2

      我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

    3. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

      按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

    4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

      我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

    5. ruby - 关于 Ruby 中 Dir[] 和 File.join() 的混淆 - 2

      我在Ruby中遇到了一个关于Dir[]和File.join()的简单程序，blobs_dir='/path/to/dir'Dir[File.join(blobs_dir,"**","*")].eachdo|file|FileUtils.rm_rf(file)ifFile.symlink?(file)我有两个困惑:首先，File.join(@blobs_dir,"**","*")中的第二个和第三个参数是什么意思？其次，Dir[]在Ruby中有什么用？我只知道它等价于Dir.glob()，但是，我对Dir.glob()确实不是很清楚。 最佳答案

    6. elasticsearch源码关于TransportSearchAction【阶段三】 - 2

      1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService：方法：1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>

    7. 关于Qt程序打包后运行库依赖的常见问题分析及解决方法 - 2

      目录一.大致如下常见问题：（1）找不到程序所依赖的Qt库version`Qt_5'notfound(requiredby（2）CouldnotLoadtheQtplatformplugin"xcb"in""eventhoughitwasfound（3）打包到在不同的linux系统下，或者打包到高版本的相同系统下，运行程序时，直接提示段错误即segmentationfault，或者Illegalinstruction(coredumped)非法指令（4）ldd应用程序或者库，查看运行所依赖的库时，直接报段错误二.问题逐个分析，得出解决方法：（1）找不到程序所依赖的Qt库version`Qt_5'

    8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

      我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

    9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

      我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

    10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

      出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

    随机推荐