在 turbolinks 准备好之前加载脚本？ $(...).DataTable 不是函数

Posted 2023-05-07

【中文标题】在 turbolinks 准备好之前加载脚本？ $(...).DataTable 不是函数

【英文标题】：Script loading before turbolinks is ready? $(...).DataTable is not a function

【发布时间】：2021-06-22 17:05:26

【问题描述】：

我有以下代码：

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

但也没有用——同样的错误。

试过Pointy的回复

将此代码添加到我的gene.html.erb：

<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> 标记内

【参考方案1】：

我以前在同时使用 jquery 和 turbolinks 时会做的事情是这样的：

document.addEventListener('turbolinks:load', () => 
  $(() => 
    $('#myTable').DataTable();
  )

  // js code not using jquery
)

【讨论】：

它对我不起作用。我已经更新了我的帖子，还是谢谢你

【参考方案2】：

将以下代码放在“turbolinks:load”侦听器的底部以停止多次触发问题。

event.stopImmediatePropagation();
return false;

在您的 .js 文件末尾，在您的侦听器之外，如果 turbolinks 没有加载，则添加以下内容以重新加载页面，它有在您第一次访问页面时不这样做的习惯。

if (!Turbolinks) 
  location.reload();


Turbolinks.dispatch("turbolinks:load");

【讨论】：

谢谢，对不起，它没有用 - 同样的问题。也许我没有正确理解。我已经更新了我的 pist