时间戳

首页 > 解决方案 > 注册新的 jquery API 函数时出错（在 Ruby on Rails 应用程序中）

ruby-on-rails - 注册新的 jquery API 函数时出错（在 Ruby on Rails 应用程序中）

问题描述

我尝试将https://github.com/ejbeaty/CellEdit添加到我的 Rails 应用程序中。https://github.com/ejbeaty/CellEditworks中的代码可以独立运行；但是当我在 Rails 应用程序中包含 celledit.js 时，我在浏览器开发控制台中收到此错误：

TypeError: jQuery.fn.dataTable is undefined

虽然相同的代码在独立应用程序中运行良好，但为什么在 Ruby on Rails 应用程序中出现此错误？这个错误是什么意思？我该如何解决？

笔记：

错误来自如下所示的函数定义：

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

   jQuery.fn.extend({

标签： ruby-on-railsdatatables

解决方案

将 jquery rails gem 添加到您的 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(){});.

推荐阅读