0

I'm on Rails 5.2, MacOS 10.13.4, ruby 2.3.7p456. I am following this guide for implementing jquery datatables. Both in development and production, the tables load without datatable formatting, but after a browswer refresh, the tables display perfectly with the datatable formatting. I'm installing using the CDN.

Here is a screenshot on inital load:

enter image description here

Then after refresh:

enter image description here

My application.html.erb:

<head>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

In my html the table has id = 'search'

the search.coffee file:

    $(document).ready ->
  $('#search').DataTable()
  return

and finally the application.js file:

//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .

I have tried moving the CDN scripts from the application.html.erb to the show page, removing the load jquery script, and using different versions of jquery in the load jquery script. I've tried on Chrome Version 67.0.3396.79 and Safari Version 11.1. All of these resulted in no change.

Has anyone run into this? I saw this question: and tried adding gem 'jquery-turbolinks' to gemfile and adding //= require jquery.turbolinks to application.js, and after bundle install and restarting the server, still no change.

tomb
  • 1,374
  • 1
  • 13
  • 23

2 Answers2

1

Responding on this from the answer over here - Rails 5: how to use $(document).ready() with turbo-links

At some point the $(document).ready call was depreciated with turbolinks, try:

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})
patrickmult
  • 31
  • 3
0

I completely removed turbolinks from my app in order to get the datatables to act properly.

tomb
  • 1,374
  • 1
  • 13
  • 23