Ошибка при регистрации новой функции API jquery (в приложении Ruby on Rails)

Question

Я попытался добавить https://github.com/ejbeaty/CellEdit в мое приложение Rails. Код в https://github.com/ejbeaty/CellEditworks отлично работает как отдельный; но когда я включаю celledit.js в свое Rails-приложение, я получаю эту ошибку в моей консоли разработки broswer:

TypeError: jQuery.fn.dataTable is undefined

Хотя тот же код отлично работает в автономном приложении, почему я получаю эту ошибку в приложении Ruby on Rails? Что означает эта ошибка? И как мне это решить?

ПРИМЕЧАНИЕ:

Ошибка исходит из определения функции, показанного ниже:

jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
   var table = this.table();

   jQuery.fn.extend({

Answer 1

Добавьте драгоценный камень рельсов в свой Gemfile:

gem 'jquery-rails', '~> 4.3', '>= 4.3.1'

Выполнить run bundle install.

Затем включите зависимости в правильном порядке в app/assets/javascripts.js:

...
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self

В этом случае я просто скачал файлы и поместил их в app/assets/javascripts.

Если вы используете Turbolinks, вы хотите подключить инициализацию к событию turbolinks:load, поскольку document.ready происходит только при начальной загрузке страницы:

//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self

$(document).on('turbolinks:load', function(){
  var table = $('#myTable').DataTable();

  function myCallbackFunction (updatedCell, updatedRow, oldValue) {
      console.log("The new value for the cell is: " + updatedCell.data());
      console.log("The values for each cell in that row are: " + updatedRow.data());
  }

  table.MakeCellsEditable({
      "onUpdate": myCallbackFunction
  });
});

Если вы не используете Turbolinks, просто используйте jQuery.ready(function(){...}) вместо $(document).on('turbolinks:load', function(){});.