Fomanti c UI: $ (...). Календарь не является функцией - PullRequest
Новая
       25

Fomanti c UI: $ (...). Календарь не является функцией

0 голосов
/ 13 апреля 2020

Я использую Rails версии 5.2.4. Вот соответствующая часть моего представления в Ruby на Rails 

      <div class="two fields">

            <div class="field">
                <label>Start date and time</label>
                <div class="ui calendar" id="standard_calendar">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" placeholder="Date/Time">
                    </div>
                </div>
            </div>

            <div class="field">
            <label>End time</label>
                <div class="ui calendar" id="time_calendar">
                    <div class="ui input left icon">
                        <i class="time icon"></i>
                        <input type="text" placeholder="Time">
                    </div>
                </div>
            </div>
        </div>

Я поместил следующий код ниже моего представления 

<script>
console.log("Before scripts run")
$('#standard_calendar').calendar();
$('#time_calendar').calendar({type: 'time'});
console.log("After scripts run")
</script>

Чтобы убедиться, что код работает, я поставил console.log, и он работал нормально. Однако когда я пытаюсь запустить два jquery скрипта, он останавливается на первом и говорит:

$(...).calendar is not a function

Я установил гем, 'fomantic-ui-sass' и 'jquery-rails' , оба из которых работают (по крайней мере, css для fomanti c есть). Я добавил их в папку приложения js, которая выглядит примерно так: 

//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Loads all Semantic javascripts
//= require semantic-ui
// Load jquery
// = require jquery
// = require jquery_ujs

Мой app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <%= favicon_link_tag 'spring-cleaners-logos/profile.png' %>
    <title>Spring Cleaners - <%= yield(:title) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="ui secondary  menu">
      <a class="item" href="/">
        <%= image_tag 'spring-cleaners-logos/profile.png', alt: 'Logo', class: 'image' %>
        Spring Cleaners
      </a>
      <div class="right menu">
        <a class="item">
          <i class="envelope icon"></i>
          Messages
        </a>
        <a class="item">
          <i class="user icon"></i>
          My Account
        </a>
        <a class="ui item" href="/logout">
          Logout
        </a>
      </div>
    </div>

    <h1><%= yield(:title) %><h1>

    <%= yield %>

  </body>
</html>

Почему он не работает? Как мне исправить?

1 Ответ

2 голосов
/ 14 апреля 2020

Возможны две проблемы с вашим application.js.

  1. В следующих строках вместо //= используется // = (обратите внимание на пробел). Руководство по Rails Конвейер активов - 2.4 Файлы манифеста и директивы специально указывает на использование //=. 

    // = require jquery
// = require jquery_ujs

  2. Если Fomanti c -UI зависит от jQuery для того, чтобы присутствовать, вам необходимо это сделать после загрузки jQuery. В противном случае он пытается зарегистрироваться как расширение jQuery или использовать методы jQuery без загрузки jQuery.

    Это означает перемещение: 

    // Loads all Semantic javascripts
//= require semantic-ui

    Ниже: 

    // Load jquery
//= require jquery
//= require jquery_ujs
...