recurring_select gem：jquery 在我的配置中不起作用
Posted
技术标签:
【中文标题】recurring_select gem：jquery 在我的配置中不起作用【英文标题】：recurring_select gem: jquery not working in my configuration 【发布时间】：2019-02-01 09:48:51 【问题描述】：我正在尝试在 rails 5 项目上使用 recurring_select 来选择事件的重复日期。除了 jquery 模态弹出窗口外，一切似乎都有效。我怀疑这与我在项目中配置资产管道的方式有关，因为当我在一个全新的单模型脚手架项目中测试 recurring_select 时，它可以工作。但它不适用于我的“真实”项目。我对“真实”项目的资产管道方法的差异包括： - 使用 Jquery 的 CDN 链接（如 bootstrap 4 启动指南所示），不包括 application.js 中 jquery 的 require 语句 - 在 application.js 和 application.css 中不包括 require_tree，而是指定：
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
在我的 application.html.erb 文件中。
这个新手非常感谢任何指导。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rafiki</title>
<!-- Required meta tags -->
<%= csrf_meta_tags %>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body class="<%= controller_name %> <%= action_name %>">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <%= link_to image_tag("lion_small.png", alt: "Brand"), root_path, :class=>'navbar-brand' %> -->
<%= link_to image_tag('https://s3.us-east-2.amazonaws.com/cryptic-garden-assets/images/lion_small.png', alt: "Brand"), root_path, :class=>'navbar-brand' %>
<% if user_signed_in? %><%= current_user.email %> |
<%= link_to 'Edit profile', edit_user_registration_path %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %> |
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %> |
<% end %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Encounters
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<%= link_to "Today", encounters_today_path, class: "dropdown-item" %>
<%= link_to "This Week", encounters_by_week_path, class: "dropdown-item" %>
<%= link_to "This Month", encounters_by_month_path, class: "dropdown-item" %>
<%= link_to "Provider Hours", new_provider_hour_path, class: "dropdown-item" %>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Maintenance
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<%= link_to "New Encounter", new_encounter_path, class: "dropdown-item" %>
<%= link_to "encounters", encounters_path, class: "dropdown-item" %>
<%= link_to "participants", participants_path, class: "dropdown-item" %>
<%= link_to "services", services_path, class: "dropdown-item" %>
<%= link_to "payment sources", payment_sources_path, class: "dropdown-item" %>
<%= link_to "rates", rates_path, class: "dropdown-item" %>
<%= link_to "auth_hours", auth_hours_path, class: "dropdown-item" %>
<%= link_to "goals", goals_path, class: "dropdown-item" %>
<%= link_to "users", users_path, class: "dropdown-item" %>
<%= link_to "provider hours", provider_hours_path, class: "dropdown-item" %>
</div>
</li>
</ul>
</div>
</nav>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="container">
<%= yield %>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
select_recurring方法用在“新遇到”的形式如下图：
<h1>New Encounter</h1>
<%= bootstrap_form_with(model: @encounter, local: true) do |form| %>
<% if @encounter.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@encounter.errors.count, "error") %> prohibited this encounter from being saved:</h2>
<ul>
<% @encounter.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= form.collection_select(:participant_id, Participant.all, :id, :name_with_initial, prompt: 'Select Participant', required: true) %>
</div>
<div class="field">
<%= form.radio_button :encounter_type, 'work', required: true %>
<%= form.radio_button :encounter_type, 'group', required: true %>
<%= form.radio_button :encounter_type, 'other', required: true %>
</div>
</br>
<div class="field">
<%= form.collection_check_boxes :service_ids, Service.all, :id, :name, checked: @encounter.service_ids %>
</div>
<div class="field">
<%= form.date_field(:encounter_date, :value => form.object.encounter_date || Date.current) %>
<%= form.select_recurring :recurring, nil, allow_blank: true %>
</div>
<div class="field">
<%= form.text_field(:duration_hours, :value => form.object.duration_hours || 3.0) %>
</div>
<div class="field">
<%= form.fields_for :work_goal_assessment do |assessment| %>
<%= assessment.collection_select(:goal_id, Goal.where(category: "Work"), :id, :name, label: "Work Goal", prompt: 'Select Work Goal', disabled: !current_user.admin?) %>
<% end %>
</div>
<div class="field">
<%= form.fields_for :social_goal_assessment do |assessment| %>
<%= assessment.collection_select(:goal_id, Goal.where(category: "Social"), :id, :name, label: "Social Goal", prompt: 'Select Social Goal', disabled: !current_user.admin?) %>
<% end %>
</div>
<div class="field">
<%= form.fields_for :community_goal_assessment do |assessment| %>
<%= assessment.collection_select(:goal_id, Goal.where(category: "Community"), :id, :name, label: "Community Goal", prompt: 'Select Community Goal', disabled: !current_user.admin?) %>
<% end %>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
<%= link_to 'Back', encounters_path %>
我想知道将 CDN 脚本引用放在标签的底部，但这就是 bootstrap 所说的将它放在他们的文档中的地方。只是为了笑，我将它转移到 application.html.erb 中的“yield”声明之上，但这并没有做任何事情。我也将它放在该部分的顶部，但这也无济于事。仍然得到同样的错误。我还将 CDN 源换成了https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js，但这并没有帮助。谢谢你看这个！
【问题讨论】：
你的 application.js 中是否添加了 recurring_select js？还要检查浏览器控制台，您应该会看到错误和更多信息。 谢谢！我确实添加了 recurring_select。这是来自浏览器控制台的错误：Uncaught ReferenceError: jQuery is not defined at recurring_select.self.js?body=1:4 at recurring_select.self.js?body=1:116 不知道是不是因为我使用的是 slim.min.js 版本： 我猜 recurring_select 在 jquery 实际加载之前就被执行了。显示你在哪里使用它，我想你没有将它包装在一个 jquery 文档就绪事件中。 谢谢。我附上了使用 select_recurring 方法的视图。奇怪的是，我将它包含在一个视图中，就像我在单模型测试项目中所做的那样。最大的不同是 jquery 来自我的测试项目中的 jquery-rails gem，但来自我的“真实”项目中的 CDN。 【参考方案1】：arieljuod 在评论中提供了答案。我需要确保 出现在加载 jquery 的脚本之后。
【讨论】：
以上是关于recurring_select gem：jquery 在我的配置中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
html http://www.jqueryscript.net/other/Fix-Element-Within-Container-jQuery-pinElement.html