Uncaught 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'

приложение.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 %>

person behindClouds    schedule 02.11.2020    source источник


Ответы (1)


Сначала подумайте, что ваш файл js daterangepicker путается с файлом плагина 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У меня работает

person Taoufik    schedule 03.11.2020
comment
Спасибо за ответ. Я внес эти изменения, и ошибка исчезла с консоли, но страница все еще не работает. В частности, кажется, что бутстрап вообще не загружается, а только в этом представлении. другие части приложения загружают бутстрап просто отлично. - person behindClouds; 03.11.2020
comment
посмотрите на это - person Taoufik; 03.11.2020