jQuery и $ не определены в like.js.erb, возвращенном из вызова AJAX

Question

Я использую Rails 6 с начальной загрузкой и веб-пакетом. все работало нормально. Bootstrap работает, jQuery работает и т. Д. До тех пор, пока ..

Я слежу за этим уроком actions_as_votable: https://blog.makersacademy.com/how-to-make-a-dynamic-rails-like-unlike-button-using-the-acts-as-votable-gem-9ab71686ff82

Когда PostController нравится сообщение, оно переходит в like.js.erb, а затемв браузере возвращает ошибку

Uncaught ReferenceError: $ is not defined
  at <anonymous>:1:1
  at processResponse (rails-ujs.js:282)
  at rails-ujs.js.195
  at XMLHttpRequest.xhr.onreadystatechang (rails-ujs.js:263)

jQuery работает, хотя у меня есть загрузчик работает без ошибок. только когда он входит через ajax, он, кажется, пропускает его.

в PostsController:

respond_to :js, :html, :json

def like
  @post = Post.find(params[:id])
  if params[:format] == 'like'
    post.liked_by current_user
  elsif params[:format] == 'unlike'
    post.unliked_by current_user
  end
end

в like.js.erb:

$('.liked-btn').on('ajax:success', function(){
  $(this).parent().parent().find('.like-count').html('<%= @post.get_likes.size %> &128591');
  $(this).closet('.liked-btn').html('Like');
});

$('.like-btn').on('ajax:success', function(){
  $(this).parent().parent().find('.like-count').html('<%= @post.get_likes.size %> &128591');
  $(this).closet('.like-btn').html('Liked');
});

Кажется, что «лайки» регистрируют только возвращаемый ajax и javascript, который выдает ошибку. Маршруты кажутся хорошими согласно учебнику.

Одна забавная вещь в моем контроллере, я неправильно набрал "response_to" как "responseds_to", и он дал метод error @ posts.get_likes, не известный для nilClass. Это означает, что он не взорвался от символа $ и прекрасно понимал jquery в этом случае. так что-то в контроллере вызывает это? (не говоря уже о том, что до запуска javascript, вероятно, обрабатывался ERB)

Примечание: я также попытался заменить $ на jQuery и получил ту же ошибку, за исключением того, что jQuery был неизвестен в то время.

Answer 1

Хорошо, похоже, это связано с тем, что, хотя jQuery загружен, его не видно с точки зрения (что бы это ни значило, если честно, это не моя область знаний).

Так что мои тесты былипоказывая загруженный jquery, как это было. Но это было видно только в вебпаке? Я полагаю?

Исправление заключается в добавлении следующего в ваш app / javascript / packs / application.js

import $ from 'jquery';
global.$ = jQuery;

Как только это будет сделано, представление можетзатем посмотрите символ, указывающий на jquery.

Теперь мое приложение уже имеет следующее в config / webpack / environment.js

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

Но, очевидно, этого недостаточно, чтобы увидеть его в представлении. ,Тем не менее, он позволяет нормально работать turbolinks / bootstrap / etc.

Так что, может быть, есть лучшее место для размещения ярлыков, где они видны обоим, но я не уверен. На данный момент запись в application.js заставляет все это работать.

Следует отметить, что я нашел информацию о том, что "expose-loader" может помочь jquery быть видимым локально, но я не смог заставить это работать.

Ссылка на эти сообщения для исправления:

• $ не определяется при установке jQuery в Rails через Webpack
• $ isне определено в представлении .js.erb с использованием Webpack 2 в приложении Rails
• https://github.com/backpackerhh/rails4-webpack2-sample-app/pull/1

Для справки я следовал инструкциям других сайтов о том, как получить bootstrap / jqueryработа с webpack и rails 5.2 / 6, но, несмотря на это, они работают. Я не вижу, чтобы они когда-либо подтверждали, что jquery также работает в их ajax.

Примеры руководств:

• https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
• https://gorails.com/forum/install-bootstrap-with-webpack-with-rails-6-beta

Answer 2

В основном эта ошибка «$ notfined» возникает из-за недоступности библиотеки jquery на странице, которую мы загружаем. Пожалуйста, проверьте консольную сеть в браузере. Загружается библиотека jquery или нет?

Пожалуйста, добавьте цитаты в селектор элементов, как показано ниже:

$('.linked-btn').on('ajax:success',funcion(){