如何在 Ruby on rails 中修复“ReferenceError: $ is not defined”？答案

【问题标题】：How to fix "ReferenceError: $ is not defined" in Ruby on rails?如何在 Ruby on rails 中修复“ReferenceError: $ is not defined”？
【发布时间】：2019-11-07 21:52:58
【问题描述】：

我尝试在我的 Ruby On Rails 应用程序中使用 Javascript 进行 ajax 调用，但出现“ReferenceError: $ is not defined”错误。但是我的 jquery 也安装在我的应用程序上。我看过其他主题，但没有解决方案有效，这就是我创建这个主题的原因

我在 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

我已尝试移除 turbolink，但没有任何改变

这是我的布局 Javascript 行：

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

我的 application.js 文件：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//= require jquery3
//= require popper
import "bootstrap"

我的 javascript ajax 调用：

<% content_for :javascript do %>
  <script>

    var textarea = document.getElementById('biography-editor');
    var text = document.getElementById('biography');
    var btn = document.getElementById('submit-biography');

    function edit_biography() {
      btn.innerHTML = 'Sauvegarder';
      btn.setAttribute( "onClick", "save_biography()" );
      textarea.style.display = 'block';
      text.style.display = 'none';
    }

    function save_biography() {
      btn.innerHTML = 'Modifier ma biographie';
      btn.setAttribute( "onClick", "edit_biography()" );
      textarea.style.display = 'none';
      text.style.display = 'block';

      var content = textarea.innerHTML;

      $.ajax({
        url : '/user/updateBiography',
        type : 'POST',
        data : content
      });
    }
  </script>
<% end %>

我希望我的 javascript 工作并理解这个问题。

谢谢

【问题讨论】：

这可能是因为 a) 您的脚本标签在 javascript_pack_tag 之前呈现，或者 b) 您的包（包括 jQuery）正在异步加载，这意味着 $.ajax 调用发生在之前jQuery 已加载。
没有因为当我点击一个按钮时我的 Ajax 被调用，我可以等待 10 分钟然后点击我仍然有问题。

标签： javascript jquery ruby-on-rails ruby webpack

【解决方案1】：

你可以使用 Vanilla JS

xhr = new XMLHttpRequest();
xhr.open('POST', '/user/updateBiography');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(encodeURI('data=' + content));

【讨论】：

这可能会有所帮助，但不能解决 $ 未定义的问题
完全和 jquery id 舒适

【解决方案2】：

我终于在这里找到了解决方案：https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

问题在于 Rails 6 中包含 WebPacker。如果你有同样的问题。尝试按照指南进行操作。

谢谢

【讨论】：