Простое приложение Rails - неперехваченная ошибка ссылки: $ не определено

#javascript #jquery #ruby-on-rails #redis #rubygems

Вопрос:

Я изучаю, как создать простое приложение rails, и у меня возникают некоторые проблемы с загрузкой jQuery в приложение. Я получаю сообщение об ошибке консоли «Ошибка неперехваченной ссылки: $ не определена», но я не уверен, почему она не работает. Любая помощь будет принята с благодарностью! Я чувствую, что мне могут не хватать некоторых файлов js, потому что, когда я запускал приложение rails, в моих ресурсах не было каталога «javascripts», и мне пришлось создать его вручную — не уверен, нормально это или нет.

Вот ссылка и на мой репозиторий: 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);
        }
      }
    );
  });
});

Еще раз спасибо!

1. application.js кажется, у вас просто куча комментариев… как загружается jquery? как вы forum_channel.js загружаетесь? forum_channel.js загружается ПОСЛЕ загрузки jquery?

2. Вы можете проверить средство просмотра исходного кода в браузере, а конкретно входит <script>s?

3. @JaromandaX Я считаю, что именно так application.js работает, но я попытался раскомментировать их, и я получаю те же результаты.

4. о, точно… рельсы …

5. @ChrisG Вот скриншот моего консольного представления и любых загружаемых им ресурсов. Я вообще не вижу никакого Jquery screencast.com/t/bE64O6z3NU

Ответ №1:

Спасибо всем за помощь — похоже, мне нужно было установить jQuery через веб-пакет с использованием yarn. Во многих учебных документах, которые я использовал, вообще не упоминалось ничего подобного. После правильной установки Jquery и добавления моих файлов в правильный каталог jQuery, похоже, загружается сейчас. Сейчас я столкнулся с отдельной проблемой, но я опубликую отдельный вопрос.

Еще раз спасибо всем!