Я пытаюсь использовать JQuery, чтобы установить hidden_field для моего указателя даты в форме редактирования.
Проблема в том, что это происходит во всплывающем окне, поэтому мне нужно иметь другую форму /javascript автогенерация для каждого потенциального элемента, который будет создан.(Вероятно, не идеал, но так оно и есть ...)
Вот как это сейчас:
<% @items.each do |item| %>
<div class="col-sm-6 col-lg-4">
<div class="card">
<a href="#photo<%= item.id %>" class="open-popup-link">
<%= image_tag item.photo.variant(auto_orient: true), class: "card-img-top" %>
</a>
<div class="card-body">
<h4 class="card-title color-self text-center" style="margin: 0">
<%= item.title %> (<%= item.item_date.strftime("%m/%d/%y") %>)
</h4>
<p class="card-text">
<%= item.caption if item.caption != "" %>
</p>
<p class="text-center boldest" style="margin: 0"><small>
<a href="#editPhoto<%= item.id %>" class="open-popup-link color-spouse">Edit</a> |
<%= link_to "Delete", capsule_capsule_item_path(@capsule, item), method: :delete, data: { confirm: 'Are you sure?' }, class: "color-spouse" %>
</small></p>
</div> <!-- card body -->
</div> <!-- card -->
</div> <!-- col -->
<div id="photo<%= item.id %>" class="white-popup mfp-hide">
<%= image_tag rails_blob_url(item.photo), style: "max-width: 100%" %>
</div>
<div id="editPhoto<%= item.id %>" class="white-popup mfp-hide">
<h2 class="font-script text-center">Edit Photo</h2>
<%= simple_form_for [@capsule, item] do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
<div class="form-group">
<%= f.label :item_date %>
<input placeholder="Date of Photograph" type="text" id="date<%= item.id %>" class="form-control datepicker"></input>
<%= f.hidden_field :item_date, id: item.id, class: "hiddenDateField" %>
</div> <!-- form group -->
<%= f.input :photo %>
<%= f.input :title %>
<%= f.input :caption %>
<%= f.hidden_field :capsule %>
</div>
<div class="form-actions text-center">
<%= f.button :submit, value: "Confirm Changes", class: "btn btn-danger" %>
</div>
<% end %>
</div> <!-- end popup -->
<script type="text/javascript">
console.log("Beginning");
$('.form_actions').hover(function() {
console.log("mouseover");
$('#date<%= item.id %>').on('change', function() {
var date = $('#date<%= item.id %>').val();
$('#<%= item.id %>').val(date);
});
});
</script>
<% end %> <!-- each -->
Глядя на консоль, я вижу "начинающую" консоль.log log при первой загрузке страницы, но я никогда не вижу появления «наведения мыши».Вместо hover я пробовал click, mouseover и mousemove, но я всегда получаю одну и ту же ошибку Uncaught ReferenceError: $ is not defined в этой строке JS.
Может кто-нибудь лучшеразбираюсь в JQuery помогите мне исправить это?