Search code examples
javascriptjqueryruby-on-railsdatatablesturbolinks

Wait for turbolinks to load before loading a <script> tag

I've had an issue I couldn't solve in another post

its problem, in short, is that DataTables isn't loading until I refresh the page. so I thought about solving it by adding a turbolinks:load event listener to the <script> tag, in order to load the CDN after turbolinks loads. Is it possible?

This is my code at the end of my genes.html.erb

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

and I was thinking of something like:

<script>
document.addEventListener("turbolinks:load", function () {
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
})
</script>

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

but obviously, a working one.

Console logs for my attempt:

Uncaught SyntaxError: Unexpected token '<'
genes:162 Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (genes:162)
    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
(anonymous) @ genes:162
./node_modules/turbolinks/dist/turbolinks.js.e.dispatch @ turbolinks.js:75
r.notifyApplicationAfterPageLoad @ turbolinks.js:994
r.pageLoaded @ turbolinks.js:948
(anonymous) @ turbolinks.js:872

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

Solution

  • You can not write something like this:

    <script>
document.addEventListener("turbolinks:load", function () {
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
})
</script>

    You have to create an element for the script tag. See this post: document.createElement("script") synchronously

    Just add

    script.async = true;

    For creating use

     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";
 document.getElementsByTagName('head')[0].appendChild(script);