从AJAX调用返回的jQuery和$not在like.js.erb中定义

Question

我将Rails6与bootstrap和webpack一起使用。一切正常。Bootstrap工作，jQuery工作，等等，直到..

我正在学习这个acts_as_votable教程:https://blog.makersacademy.com/how-to-make-a-dynamic-rails-like-differ-button-using-the-acts-as-votable-gem-9ab71686ff82

当PostController喜欢post时，它进入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

$('.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');
});

注意：我也尝试用jQuery替换$，得到了同样的错误，除了当时用jQuery未知。

Answer 1

好吧，这似乎是因为即使加载了jQuery，但它在视图中是不可见的（不管这意味着什么，老实说，这不是我的专长领域）。

所以我的测试显示jquery已加载。但它只对WebPack可见？我猜？

修复方法是在app/javascript/packs/application.js中添加以下内容

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

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

所以也许有一个更好的地方把快捷符号放在两者都能看到的地方，但我不确定。到目前为止，application.js的条目使其全部工作。

需要注意的是，我确实找到了“expose-loader”可以帮助jquery在本地被看到的信息，但我无法使其起作用。

引用这些文章获取修复：

null

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