在turbolinks准备就绪之前加载脚本?$(...).DataTable不是函数 [英] Script loading before turbolinks is ready? $(...).DataTable is not a function

问题描述

我有以下代码:

 < script type ="文本/javascript"charset ="utf8"src =" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"</script>< script type =文本/javascript">document.addEventListener("turbolinks:load"，function(){$('#myTable').DataTable();});</script> 

它在ID为 id = myTable 的表中使用

尝试了arieljuod的回复

genes.html.erb中的

 <！-< script>document.addEventListener('turbolinks:load'，()=> {$(()=> {$('#myTable').DataTable();})})</script> 

但也不起作用-相同的错误.

尝试了尖锐的回复

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

 < script>document.addEventListener("turbolinks:load"，function(){var script = document.createElement('script');script.onload = function(){alert(脚本已加载并准备就绪")；};script.src ="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"；document.getElementsByTagName('head')[0] .appendChild(script);});</script>< script type =文本/javascript">document.addEventListener("turbolinks:load"，function(){$('#myTable').DataTable();});</script> 

但是它不起作用.尽管从 localhost:3000 收到警报，提示脚本已加载并准备就绪，但DataTables却没有显示-控制台日志:

 未捕获的TypeError:$(...).DataTable不是函数< anonymous>.(基因:168)在Object ../node_modules/turbolinks/dist/turbolinks.js.e.dispatch(turbolinks.js:75)在r.notifyApplicationAfterPageLoad(turbolinks.js:994)在r.pageLoaded(turbolinks.js:948)在turbolinks.js:872 

我还尝试将脚本添加到 application.js webpacker(相同错误)

编辑4?:

 < script type ="文本/javascript"charset ="utf8"var script = document.createElement('script');script.onload = function(){alert(脚本已加载并准备就绪")；};script.async = true;script.src ="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"；//修改脚本以将其添加到正文"中如在控制台中一样，请操作"到控制台.版本在body标签中document.getElementsByTagName('body')[0] .appendChild(script);</script>< script type =文本/javascript">document.addEventListener("turbolinks:load"，function(){$('#myTable').DataTable();});</script> 

工作并将脚本附加到< head> 上，但不会加载DataTables(不是函数).我不知道这样加载它(不起作用)和可以加载(刷新后)之间有什么区别:

 < script type ="文本/javascript"charset ="utf8"src =" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"</script> 

它们实际上显示在控制台中同一位置的< body> 标记内

解决方案

在同时使用jquery和turbolink时，我经常要做的事情是:

  document.addEventListener('turbolinks:load'，()=> {$(()=> {$('#myTable').DataTable();})//js代码未使用jquery}) 

I have the following code:

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

It uses DataTables in my table with id id=myTable But upon the first load after rails s, the console logs:

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

After I refresh, the error is gone, and the script (kind of) works. It does what it is supposed to, but it might render a duplicate or triplicate if I go back one page to the page that renders the script.

I think Uncaught TypeError: $(...).DataTable is not a function is because my script was loaded before webpacker, maybe, and that is why it won't work until I refresh.

So I tried to copy the txt from src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js" and created a "datatables.js" file in my javascript/js/ folder, as such: ![datatables.js location]

Afterwards, imported it to the application.js webpacker:

// app/javascript/packs/application.js
import "../js/datatables"

and in my genes.html.erb (where I have my DataTables script), removed the CDN script, as it should've been imported via webpacker:

<script type="text/javascript">
document.addEventListener("turbolinks:load", function () {
  $('#myTable').DataTable();
});
</script>

and the console logs the same error:

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

but it doesn't go away after a refresh.

Any ideas?

EDIT 1:

Following tanner2379's directions

I tried to add this at the bottom of my application.js file to have it reload if turbolinks wasn't loaded

// app/javascript/packs/application.js
Rails.start()
Turbolinks.start()
ActiveStorage.start()


if (!Turbolinks) {
    location.reload();
  }
  Turbolinks.dispatch("turbolinks:load");

and this at the bottom of my genes.html.erb file to prevent it from loading multiple times

<script type="text/javascript">
document.addEventListener("turbolinks:load", function () {
  $('#myTable').DataTable();
  event.stopImmediatePropagation();
  return false;
});
</script>

but the problem is still the same. It doesn't load on first arrival and it instantiates multiple times if I go back to the page,

EDIT 2:

Tried arieljuod's reply

<!-- in genes.html.erb -->
<script>
document.addEventListener('turbolinks:load', () => {
  $(() => {
    $('#myTable').DataTable();
  })
})
</script>

but didn't work either - same error.

Tried Pointy's reply

added this code to my 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>

but it doesn't work. Despite receiving the alert from localhost:3000 saying Script loaded and ready, DataTables doesn't show - Console logs:

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

I have also tried adding the script to the application.js webpacker (same error)

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

Works and appends the script to <head> but DataTables won't load (not a function). I don't know what's the difference between loading it like this, which doesn't work, and this one that does(after a refresh):

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

They actually show up in the console in the same place, within the <body> tag

解决方案

What I used to do when using jquery and turbolinks together was something like:

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

  // js code not using jquery
})

这篇关于在turbolinks准备就绪之前加载脚本?$(...).DataTable不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！