javascript - AJAX 调用返回的 jQuery 和 $ 未在 like.js.erb 中定义

Question

我正在使用带有 bootstrap 和 webpack 的 Rails 6。一切都工作正常。 Bootstrap 可以工作，jQuery 可以工作，等等，直到..

我正在关注这个acts_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 正在工作，因为我的 bootstrap 工作没有错误。只有当它通过 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。按照教程，路线看起来不错。

一件有趣的事情是在我的 Controller 中我将“respond_to”错误地输入为“responds_to”，并且它给出了错误@posts.get_likes method notknown for nilClass。这意味着它不会在 $ 符号上爆炸，并且在这种情况下可以很好地理解 jquery。那么 Controller 中的某些东西导致了这个？ (别介意有趣的事情，可能只是 ERB 在 javascript 运行之前得到处理)

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

Answer 1

好吧，这似乎是因为即使 jQuery 已加载，它从 View 中也不可见(无论这意味着什么，老实说，这不是我的专业领域)。

所以我的测试显示 jquery 已加载，因为它是。但它只对 webpack 可见？我猜？

修复方法是将以下内容添加到您的 app/javascript/packs/application.js

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

一旦完成， View 就可以看到指向 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

但显然这还不足以从 View 中看出。然而，它确实让 Turbolinks/bootstrap/etc 正常工作。

所以也许有一个更好的地方可以将快捷方式符号放置在双方都能看到的地方，但我不确定。到目前为止，application.js 的入口就可以正常工作了。

应该指出的是，我确实找到了“expose-loader”可以帮助本地看到 jquery 的信息，但我无法让它工作。

引用这些帖子进行修复:

• $ is not defined when installing jQuery in Rails via Webpack
• $ is not defined within a .js.erb view using Webpack 2 in Rails app
• 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