在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屋!