问题描述
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script type="text/javascript">
document.addEventListener("turbolinks:load",function () {
$('#myTable').DataTable();
});
</script>
它在我的表中使用 DataTables,id 为 id=myTable
但是在 rails s
之后的第一次加载时,控制台会记录:
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (<anonymous>:3:17)
at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
at r.visitCompleted (turbolinks.js:1007)
at r.complete (turbolinks.js:782)
at r.<anonymous> (turbolinks.js:812)
at turbolinks.js:862
刷新后,错误消失了,脚本(有点)有效。它会做它应该做的事情,但如果我返回一页到呈现脚本的页面,它可能会呈现重复或三次重复。
我认为 Uncaught TypeError: $(...).DataTable is not a function
是因为我的脚本可能是在 webpacker 之前加载的,这就是为什么它在我刷新之前无法工作。
所以我尝试从 src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"
复制 txt 并在我的 javascript/js/
文件夹中创建一个“datatables.js”文件,如下所示:
![datatables.js location]
之后,将其导入到 application.js
webpacker:
// app/javascript/packs/application.js
import "../js/datatables"
在我的 genes.html.erb
(我有我的 DataTables 脚本的地方)中,删除了 CDN 脚本,因为它应该是通过 webpacker 导入的:
<script type="text/javascript">
document.addEventListener("turbolinks:load",function () {
$('#myTable').DataTable();
});
</script>
并且控制台记录了相同的错误:
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (<anonymous>:3:17)
at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
at r.visitCompleted (turbolinks.js:1007)
at r.complete (turbolinks.js:782)
at r.<anonymous> (turbolinks.js:812)
at turbolinks.js:862
但刷新后它不会消失。
有什么想法吗?
编辑 1:
遵循 tanner2379 的指示
我试图在我的 application.js 文件的底部添加它,以便在未加载 turbolinks 时重新加载它
// app/javascript/packs/application.js
Rails.start()
Turbolinks.start()
ActiveStorage.start()
if (!Turbolinks) {
location.reload();
}
Turbolinks.dispatch("turbolinks:load");
这在我的genes.html.erb文件的底部,以防止它多次加载
<script type="text/javascript">
document.addEventListener("turbolinks:load",function () {
$('#myTable').DataTable();
event.stopImmediatePropagation();
return false;
});
</script>
但问题还是一样。它不会在第一次到达时加载,如果我返回页面,它会多次实例化,
编辑 2:
尝试了 arieljuod 的回复
<!-- in genes.html.erb -->
<script>
document.addEventListener('turbolinks:load',() => {
$(() => {
$('#myTable').DataTable();
})
})
</script>
但也没有用 - 同样的错误。
<script>
document.addEventListener("turbolinks:load",function () {
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js";
document.getElementsByTagName('head')[0].appendChild(script);
});
</script>
<script type="text/javascript">
document.addEventListener("turbolinks:load",function () {
$('#myTable').DataTable();
});
</script>
但它不起作用。尽管收到来自 localhost:3000
说 Script loaded and ready
的警报,但 DataTables 没有显示 - 控制台日志:
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (genes:168)
at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
at r.pageLoaded (turbolinks.js:948)
at turbolinks.js:872
我也尝试将脚本添加到 application.js
webpacker(同样的错误)
编辑 4?:
<script type="text/javascript" charset="utf8">
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.async = true;
script.src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js";
// MODIFIED THE SCRIPT TO ADD IT TO "BODY" INSTEAD,as in the console,the "working" version has it in the body tag
document.getElementsByTagName('body')[0].appendChild(script);
</script>
<script type="text/javascript">
document.addEventListener("turbolinks:load",function () {
$('#myTable').DataTable();
});
</script>
工作并将脚本附加到 <head>
但不会加载数据表(不是函数)。我不知道像这样加载它,它不起作用,而这个加载它(刷新后)有什么区别:
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
它们实际上显示在控制台中的同一个位置,在 <body>
标记内
解决方法
将以下代码放在“turbolinks:load”侦听器的底部以阻止多次触发问题。
event.stopImmediatePropagation();
return false;
在您的 .js 文件的末尾,在您的侦听器之外,如果 turbolinks 未加载,则放置以下内容以重新加载页面,这是您第一次访问页面时不这样做的习惯。
if (!Turbolinks) {
location.reload();
}
Turbolinks.dispatch("turbolinks:load");
,
我曾经在同时使用 jquery 和 turbolinks 时所做的事情是这样的:
document.addEventListener('turbolinks:load',() => {
$(() => {
$('#myTable').DataTable();
})
// js code not using jquery
})