简体   繁体   English

如何在 Rails 6.0.3.3 中使用 jQuery?

[英]How do I use jQuery in Rails 6.0.3.3?

running Rails 6.0.3.3 and can't get jQuery to work.运行 Rails 6.0.3.3 并且无法让 jQuery 工作。

Here's packs/application.js这是包/application.js

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

And in my view I have something like this:在我看来,我有这样的事情:

<head>
<%= javascript_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
</head>

 <div id="pop">
   TEST
 </div>
 <script>
    $(document).ready(function() { 
        $('#pop').hide(); 
      });
 </script>

And so when my page loads I would expect the #pop div that says 'TEST' to NOT show.因此,当我的页面加载时,我希望显示“测试”的 #pop div 不会显示。 It seems as if this set up is just not working.似乎这个设置不起作用。 Thoughts?想法?

Rails 6 doesn't include JQuery by default. Rails 6 默认不包含 JQuery。 It looks like you didn't install it.你好像没有安装

Here's a link that shows how does Webpack works and how to install JQuery with Rails 6.这是一个链接,显示了 Webpack 的工作原理以及如何使用 Rails 6 安装 JQuery。

But if just want to install JQuery, here is how to do it:但如果只是想安装 JQuery,这里是如何做到的:

Run yarn add jquery in your project.在您的项目中运行yarn add jquery

Be sure to check if Jquery has been successfully installed by checking your package.json and yarn.json where the JQuery package should be visible.请务必通过检查您的package.jsonyarn.json来检查 Jquery 是否已成功安装,其中 JQuery 包应该是可见的。

Then add this snippet in your environment.js :然后在您的environment.js添加此代码段:

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Your environment.js should then look like this:您的environment.js应该如下所示:

const { environment } = require("@rails/webpacker");
const webpack = require("webpack");

environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery/src/jquery",
    jQuery: "jquery/src/jquery",
  })
);

module.exports = environment;

Now simply add require('jquery') in your application.js .现在只需在application.js添加require('jquery')

application.js file: application.js文件:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM