我正在运行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>
为什么不起作用?我该如何解决?
// =
(注意空格)代替//=
。 Rails指南The Asset Pipeline - 2.4 Manifest Files and Directives特别声明要使用//=
。// = require jquery
// = require jquery_ujs
如果Fomantic-UI依赖于jQuery,则在加载jQuery后应要求它。否则,它会尝试将自身注册为jQuery扩展或使用jQuery方法而不加载jQuery。
// Loads all Semantic javascripts
//= require semantic-ui
以下:
// Load jquery
//= require jquery
//= require jquery_ujs