时间戳

首页 > 解决方案 > 简单的 Rails 应用程序 - 未捕获的 ReferenceError：$ 未定义

javascript - 简单的 Rails 应用程序 - 未捕获的 ReferenceError：$ 未定义

问题描述

我正在学习如何构建一个简单的 Rails 应用程序，并且在将 JQuery 加载到应用程序中时遇到了一些问题。我收到“未捕获的 ReferenceError：$ 未定义”的控制台错误，但我不确定它为什么不起作用。任何帮助将不胜感激！我觉得我可能会丢失一些 js 文件，因为当我启动 rails 应用程序时，我的资产中没有“javascripts”目录，我不得不手动创建一个 - 不确定这是否正常。

这是我的仓库的链接：https ://github.com/scottlandes1217/Hubbubb

应用程序.js

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

应用程序.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);
        }
      }
    );
  });
});

再次感谢！

标签： javascriptjqueryruby-on-railsredisrubygems

解决方案

感谢大家的帮助 - 看起来我需要使用 yarn 通过 webpack 安装 jQuery。我使用的很多学习文档根本没有提到这样的东西。在以正确的方式安装 Jquery 并将我的文件添加到正确的目录之后，现在似乎正在加载 jQuery。我现在遇到了一个单独的问题，但我会发布一个单独的问题。

再次感谢大家！

推荐阅读