未捕获的 TypeError: $(...).daterangepicker 不是一个函数 Rails

Question

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

宝石文件：

gem 'jquery-rails'

gem 'jquery-ui-rails'

gem 'bootstrap', '~> 4.3.1'

gem 'momentjs-rails'

gem 'bootstrap-daterangepicker-rails'

应用程序.js

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

应用程序.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/layouts/application.html.erb

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

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