I'm trying to use recurring_select on a rails 5 project to select recurring dates for events. Everything seems to work except for the jquery modal popup. I suspect it has something to do with the way I've configured the asset pipeline in my project, because when I test recurring_select in a brand new single model scaffolded project, it works. But it won't work in my "real" project. The differences in my asset pipeline approach for the "real" project include: - using CDN link for Jquery (as shown on the bootstrap 4 startup guide), not including require statements for jquery in application.js - not including require_tree in application.js and application.css, instead specifying:
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
in my application.html.erb file.
Any guidance is much appreciated by this newbie. Thank you.
<!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>
The select_recurring method is used in a "new encounter" form as shown below:
<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 %>
I wondered about putting the CDN script references at the bottom of the tag but that's where bootstrap said to put it in their docs. Just for grins, I shifted it to ABOVE the "yield" statement in application.html.erb but that didn't do anything. I also put it at the top of the section and that didn't help either. Still getting the same error. I also swapped out the CDN source to https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js and that didn't help. Thank you for looking at this!
arieljuod provided the answer in a comment. I needed to make sure that the <% javascript_include_tag 'application' %> came AFTER the script that loads jquery.