问题描述
我正在尝试使用 JQuery 在编辑表单上为我的 rails hidden_field
设置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 -->
查看控制台,我在页面首次加载时看到“开始”console.log 语句,但我从未看到“鼠标悬停”出现。
我尝试过click
、 mouseover
和mousemove
,而不是hover
,但我总是得到相同的Uncaught ReferenceError: $ is not defined
错误在 JS 的那一行。
任何更精通 JQuery 的人都可以帮助我纠正这个问题吗?
1楼
在加载 JQuery 之前,您的 JavaScript 正在执行。要确认暂时注释掉代码,并在加载弹出窗口时尝试在控制台上执行此操作。
$('.form_actions')
如果它仍然给你错误,那么 JQuery 没有被加载到页面上。 如果它不意味着您的脚本在加载 Jquery 之前加载