Loading DataTables with RequireJS in CakePHP: Issue with DebugKit- javascript技术脚本

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 加载它一样。

这是我的"数据主"脚本：

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.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" }

    ]

  });



});

<!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>
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');

  }

);

还请注意：

这就是我运行 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)，因此我仍然不能使用它

是的，所以我所做的就是从下往上开始，让裸机配置正常工作。

app.js

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.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" }

    ]

  });



});

<!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>
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');

  }

);

index.html

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.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" }

    ]

  });



});

<!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>
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');

  }

);

文件夹结构

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

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

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.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" }

    ]

  });



});

<!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>
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');

  }

);

我终于找到了问题的根源。

我重新创建了一个与我的 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，可能对遇到相同问题的人有用

Loading DataTables with RequireJS in CakePHP: Issue with DebugKit

Loading DataTables with RequireJS in CakePHP: Issue with DebugKit

相关推荐

Spring部署设置openshift

检查Java中正则表达式中模式的第n次出现

如何让 JTable 停留在已编辑的单元格上

Weblogic 12c 部署

Resteasy Content-Type 默认值

代码不会停止运行，在 Java 中

Out of memory java heap space

Log4j 记录到共享日志文件