时间戳

首页 > 解决方案 > 在 Rails 6 中实现 Jquery 的问题

javascript - 在 Rails 6 中实现 Jquery 的问题

问题描述

我在让 Materialize 的 javascript 元素与 rails 6 一起使用时遇到问题。我正在使用“materialize-sass”gem。

这是我的 javascript 文件

import 'materialize-css/dist/js/materialize'


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

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


//Floating Action Button
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'up'
    });
  });

//Datepicker
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.datepicker');
  var instances = M.Datepicker.init(elems);
});

//Dropdown Menu
$(document).ready(function(){
  console.log("run")
  $('select').formSelect();
});

我在浏览器中遇到的错误

“未捕获的 TypeError：$(...).formSelect 不是函数”“jQuery.Deferred 异常：$(...).formSelect 不是函数 TypeError：$(...).formSelect 不是函数”

让我知道是否需要添加更多详细信息。

标签： javascriptruby-on-railsmaterializewebpacker

解决方案

您没有 jquery 设置。尝试以下操作：

yarn add jquery

然后在 config/webpack/environment.js 添加以下内容：

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

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
}))

module.exports = environment

您还安装了 Turbolinks，因此您需要使用：

document.addEventListener("turbolinks:load", function() {
  ...
});

监听页面加载。

推荐阅读