如何在 Rails 6 项目中包含 jquery-ui？

Posted 2023-05-08

【中文标题】如何在 Rails 6 项目中包含 jquery-ui？

【英文标题】：How to include jquery-ui in Rails 6 project?

【发布时间】：2020-11-19 22:47:28

【问题描述】：

我正在使用 Rails 6.0.3.2 和 jquery-ui 1.12。

仍然无法使其工作： Uncaught TypeError: $(...).datepicker is not a function

试过了：

我。编辑 config/webpack/environment.js

最新版本：

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin(
  "$":"jquery",
  "jQuery":"jquery",
  "window.jQuery":"jquery",
  Popper: ['popper.js', 'default']
  ))

二。导入和要求：

require( "jquery-ui/ui/widgets/datepicker" );

和

import "jquery-ui/ui/widgets/datepicker"

我知道有很多类似我的问题。但是，它们中的大多数已经过时了。尝试了一百万种具有相同答案的组合：“NOT A FUNCTION”

请帮助提供有效的配置和导入/需要说明！提前致谢！

【问题讨论】：

你可以关注这个。 botreetechnologies.com/blog/….

我已经安装了 jquery 并且可以正常工作，现在我需要 jquery-UI (jqueryui.com) 才能正常工作。

【参考方案1】：

最后我想出了如何让所有这些东西工作（我的意思是 bootstrap、jquery-ui 和其他）。我希望我能花不到半天的时间来收集每一滴食谱。

我的config/webpack/environment.js：

const  environment  = require('@rails/webpacker')
//const  VueLoaderPlugin  = require('vue-loader')
//const vue = require('./loaders/vue')

//environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
//environment.loaders.prepend('vue', vue)
const webpack = require('webpack')

module.exports = environment

我注释掉了 Vue 部分，以防你更喜欢其他东西。

我的application.js：

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

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import * as datepicker from 'jquery-ui/ui/widgets/datepicker';

document.addEventListener("turbolinks:load", function() 
  if ($('#termsAcceptBtn').length) 
    $('#termsAcceptBtn').addEventListener("click", function() 
      $('#termsModal').modal('show');
    );
  
);

$(document).on('turbolinks:load', function() 
  $("#user_birth").datepicker();
);

我希望它可以帮助某人节省半天。