JQuery Error within Rails Each loop (Uncaught ReferenceError: $ is not defined)

Question

I'm attempting to use JQuery to set a hidden_field for my rails datepicker on an edit form.

The issue is this is happening in a popup, so I have to have a different form/javascript autogenerate for each potential item to be generated. (Probably not ideal, but the way it is...)

Here's the way it is right now:

<% @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> |&nbsp;
          <%= 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 -->

Looking at the console, I see the "beginning" console.log statement when the page first loads, but I never see the "mouseover" appear. Instead of hover I've tried click, mouseover, and mousemove, but I always get the same Uncaught ReferenceError: $ is not defined error on that line of the JS.

Can anyone more well-versed in JQuery help me correct this?

jQuery is not being correctly loaded in your page. Can you please check if its added? — Smit Raval
– Smit Raval, Commented Feb 13, 2019 at 6:36
@SmitRaval It reaches the first console.log just fine and I use jquery extensively throughout the project. How is that possible? — Liz
– Liz, Commented Feb 13, 2019 at 7:07
Uncaught ReferenceError: $ is not defined this error means $ is not available for the DOM. — Smit Raval
– Smit Raval, Commented Feb 13, 2019 at 7:10
@liz can you please wrap your script code inside ready event of DOM? — uzaif
– uzaif, Commented Feb 13, 2019 at 7:16
@uzaif I tried wrapping it in $(document).ready(function() { but now the error is just called on that line... — Liz
– Liz, Commented Feb 13, 2019 at 7:24

Amogh Hegde · Accepted Answer · 2019-02-13 07:32:19Z

1

Your JavaScript is executing before JQuery is loaded.To confirm comment out the code temporarily and try executing this on the console when the pop up is loaded.

$('.form_actions')

If it still gives you error then JQuery isnt being loaded on the page. If it doesnt that means your script loads before the Jquery is loaded

answered Feb 13, 2019 at 7:32

Amogh Hegde

4524 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amogh Hegde Over a year ago

Did you find a solution?

Liz Over a year ago

Yes! The loading order of my various javascripts was messed up. Once I sorted that out it worked perfectly. Thank you!

Collectives™ on Stack Overflow

JQuery Error within Rails Each loop (Uncaught ReferenceError: $ is not defined)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related