Fomantic UI:$(...)。calendar不是函数

问题描述 投票:0回答:1

我正在运行Rails版本5.2.4,这是我在Ruby on 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

我已经安装了gem 'fomantic-ui-sass''jquery-rails',它们都可以正常工作(至少对于fostic来说是css)。我也将它们添加到application.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>

为什么不起作用?我该如何解决?

ruby-on-rails semantic-ui fomantic-ui
1个回答
2
投票

    以下各行使用// =(注意空格)代替//=。 Rails指南The Asset Pipeline - 2.4 Manifest Files and Directives特别声明要使用//=
  1. // = require jquery // = require jquery_ujs
  2. 如果Fomantic-UI依赖于jQuery,则在加载jQuery后应要求它。否则,它会尝试将自身注册为jQuery扩展或使用jQuery方法而不加载jQuery。
  3. 这意味着移动:

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

    以下:

    // Load jquery
    //= require jquery
    //= require jquery_ujs
    
© www.soinside.com 2019 - 2024. All rights reserved.