字体用户界面：$(...)。日历不是函数 [英] Fomantic UI: $(...).calendar is not a function
本文介绍了字体用户界面：$(...)。日历不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我运行的是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'，这两个工具都在工作(至少fomatics的css是)。我还将它们添加到了Applation.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>
为什么它不起作用？我如何修复？
推荐答案
您的application.js有两个潜在问题。
以下几行使用
// =(注意空格)而不是//=。Rails指南The Asset Pipeline - 2.4 Manifest Files and Directives特别说明了如何使用//=。// = require jquery // = require jquery_ujs如果Fomatics-UI依赖于jQuery的存在，您应该在加载jQuery之后需要它。否则，它会尝试将自身注册为jQuery扩展，或者在不加载jQuery的情况下使用jQuery方法。
这意味着移动：
// Loads all Semantic javascripts //= require semantic-ui下图：
// Load jquery //= require jquery //= require jquery_ujs
这篇关于字体用户界面：$(...)。日历不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
