未捕获的TypeError：$...daterangepicker不是函数Rails

问题描述

我一直在努力将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'

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 %>

解决方法

首先认为您的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

中添加依赖项，则它们不是必需的