未捕获Rails：$(...).daterangepicker不是函数Rails

Question

我一直致力于将daterangepicker (https://www.daterangepicker.com/#usage)添加到rails应用程序中，并成功地使其正常工作。然而，今天，不知从哪里，我开始在我的控制台上收到Uncaught TypeError: $(...).daterangepicker is not a function错误，然后分页。自从它正常工作以来，我没有改变我的application.js、gemfile和样式表，希望在这里得到一些帮助。从一些研究来看，函数似乎在jquery之前就加载了，但我对为什么会发生这种情况感到困惑。

Gem文件：

gem 'jquery-rails'

gem 'jquery-ui-rails'

gem 'bootstrap', '~> 4.3.1'

gem 'momentjs-rails'

gem 'bootstrap-daterangepicker-rails'

application.js

//= require rails-ujs
//= require jquery
//= require jquery-ui
//= require moment
//= require bootstrap
//= require daterangepicker
//= require_tree .

application.scss

*= require jquery-ui
*= require daterangepicker

daterangepicker.js

$(function() {
  $('.daterange').daterangepicker({
    opens: 'left',
    locale: { format: 'YYYY/MM/DD'}
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( daterangepicker.js )

查看：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<%= javascript_include_tag "daterangepicker.js" %>
    <%= form_with scope: :export, url: history_export_path, remote: true do |f| %>
        <%= f.text_field :created_at_range, :class => 'form-control daterange', value: @created_at_range %>
        <%= f.submit "Filter Histories"%>
        <% @export.date_scope(@start_date, @end_date).order(sort_column + " " + sort_direction).each do |history| %>
            <tr>
                <td><%= history.success %></td>
                <td><%= history.message.to_s %></td>
                <td><%= history.created_at %></td>
            </tr>
        <% end %>
    <% end %>

Answer 1

首先，认为您的daterangepicker js文件与daterangepicker插件文件存在混淆。将其重命名或在视图文件的末尾添加脚本标记。

将javascript_include_tag和stylesheet_link_tag添加到application.html.erb

#app/views/layout/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

删除脚本标签、链接标签和javascript_include_tag 'daterangepicker‘您的视图，如果您在application.js和application.css中添加依赖项，则不需要这些标签

​