Simple Rails App - Uncaught ReferenceError: $ is not defined

Question

I'm learning how to build a simple rails app and I'm running into some problems getting JQuery to load in the app. I'm getting a console error of "Uncaught ReferenceError: $ is not defined" but I'm unsure why it isn't working. Any help would be greatly appreciated! I feel like I might be missing some js files, because when I spun up the rails app, there wasn't a "javascripts" directory in my assets and I had to manually create one - not sure if that's normal or not.

Here's a link to my repo as well: https://github.com/scottlandes1217/Hubbubb

application.js

//= require jquery
//= require jquery_ujs
//= require popper
//= require_tree .
//= require bootstrap
//= require bootstrap-sprockets

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Hubbubb</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <%= render partial: 'shared/navigation_bar' %>
          <div class="my-3">
            <%= yield %>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

forum_channel.js

$(function() {
  $('[data-channel-subscribe="room"]').each(function(index, element) {
    var $element = $(element),
        room_id = $element.data('room-id')
        messageTemplate = $('[data-role="message-template"]');

    $element.animate({ scrollTop: $element.prop("scrollHeight")}, 1000)        

    App.cable.subscriptions.create(
      {
        channel: "ForumChannel",
        forun: forum_id
      },
      {
        received: function(data) {
          var content = messageTemplate.children().clone(true, true);
          content.find('[data-role="user-avatar"]').attr('src', data.user_avatar_url);
          content.find('[data-role="message-text"]').text(data.message);
          content.find('[data-role="message-date"]').text(data.updated_at);
          $element.append(content);
          $element.animate({ scrollTop: $element.prop("scrollHeight")}, 1000);
        }
      }
    );
  });
});

Thanks again!

Answer 1

Thanks for everyone's help - It does look like I needed to install jQuery through a webpack using yarn. A lot of the learning documentation that I was using didn't mention anything like this at all. After installing Jquery the right way and adding my files to the correct directory, jQuery seems to be loading now. I am now running into a separate issue, but I'll post a separate question.

Thanks again, everyone!

Simple Rails App - Uncaught ReferenceError: $ is not defined

Question

1 answers

solution1
0 2020-10-14 00:59:26

Simple Rails App - Uncaught ReferenceError: $ is not defined

Question

1 answers

solution1 0 2020-10-14 00:59:26

solution1
0 2020-10-14 00:59:26