Rails 5: How to load Datatable javascript in partial html view

Question

I am trying to get a datatable to load in one of my partial views, which is simply a table. The datatable is not showing up though, only the html in the "results" partial.

Scenarios is the parent scaffold that was created. Results is the table partial I am rendering in the index of Scenarios:

My question ultimately is this: does _results.html.erb have access to the sceanrios.coffee file?

project\\app\\views\\scenarios\\_results.html.erb:

<table id="example" class="display" style="width:100%">
  <thead>
  <tr>
    <th>Submitter</th>
    <th>Scenario Name</th>
    <th>Options</th>
    <th colspan="8"></th>
  </tr>
  </thead>
  <tbody>
  <% @scenarios.each do |scenario| %>
    <tr>
      <td class="text-left"><%= scenario.submitter %></td>
      <td class="text-left"><%= scenario.scenario_name %></td>
      <td><%= render 'options', scenario: scenario %></td>
    </tr>
  <% end %>
  </tbody>
</table>

project\\app\\assets\\javascripts\\scenarios.coffee:

jQuery ->
  $(document).ready ->
    console.log("Working!")
    $('#example').dataTable()

Application.js:

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables/jquery.dataTables
//= require turbolinks
//= require_tree .

Browser Errors:

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at jquery.dataTables.bootstrap.self-131f13015a9da63d8ed71f09b1c89ebd2fc8c81f1b2032430e06b8547d03f943.js?body=1:48
    at jquery.dataTables.bootstrap.self-131f13015a9da63d8ed71f09b1c89ebd2fc8c81f1b2032430e06b8547d03f943.js?body=1:40
    at jquery.dataTables.bootstrap.self-131f13015a9da63d8ed71f09b1c89ebd2fc8c81f1b2032430e06b8547d03f943.js?body=1:42

Uncaught TypeError: $(...).dataTable is not a function
    at HTMLDocument.<anonymous> (scenarios.self-8ab21e2e580c359da8a7fb9d7d533ce24740a882e2519d4675b5c305690a9b97.js?body=1:3)
    at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)

Uncaught TypeError: Cannot read property 'LL_onclickHanlderExist' of null
    at window.LL_CustomUI.LL_CustomUI.animation.LL_CustomUI.animation.addClickHandler (hostui_animation.js?rnd=0.7801729638396486:1)

Answer 1

Does _results.html.erb have access to the scenarios.coffee file?

Yes, it should be. Because scenarios.coffee is a controller-specific-asset meaning it will available to all scenarios_controller#actions which eventually available to the respected views which are called upon by their respected actions.

Answer 2

I got it to work but there may have been multiple issues with my code:

1. made this change in scenarios.coffee:

   $.noConflict() jQuery(document).ready ($) -> $('#example').DataTable() return

2. Ensure that you have only one version of jquery required. Check your application.js, and your application layout head.

3. Ensure that core jquery is loaded before the datatables jquery.