Ruby on Rails 7でselect2を導入方法
Webpackerの場合はこちらの記事です (https://qiita.com/YutoYasunaga/items/5cbbd546f51d8b37dac8)
select2とjQueryインストール
yarn add select2 jquery
select2 コントローラー作成
```javascript:app/frontend/controllers/select2_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';
import 'select2/dist/css/select2.min.css'
import Select2 from "select2"
export default class extends Controller {
connect() {
Select2()
$('.js-select2').select2()
//...
Updated by Yuto at 2022-10-25 06:00
【Ruby on Rails】Webpackerにselect2導入メモ
Ruby on Rails 7 (stimulus) の場合はこちらの記事です (https://qiita.com/YutoYasunaga/items/9044a3d590f7d8f1f41d)
jQuery導入
select2を使う為に、jQueryが必要です。
jQuery導入方法 (https://qiita.com/YutoYasunaga/items/9a7eaa0a4ca898535912)
select2導入
:terminal
yarn add select2
```javascript:app/javascript/packs/application.js
import 'select2'
import 'select2/dist/css/select2.css'
document.addEventListener('turbolinks:load', () => {
$('.js-select').select2({
placeholder: 'Select an option',
allowClear: true
...
Updated by Yuto at 2022-01-26 19:57
【Ruby on Rails】WebpackerでBootstrap、jQueryを導入方法
Webpackerのインストール
ruby:Gemfile
gem "webpacker"
bundle install
rails webpacker:install
Bootstrapの導入
yarn add bootstrap@4.3.1 jquery popper.js
```javascript:webpacker/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 =...
Updated by Yuto at 2022-01-20 23:55
【Ruby on Rails】Webpackerでcocoonを導入方法
cocoonを使うなら、jQueryが必要なので、WebpackerでjQueryを導入方法はこちらです：
【Ruby on Rails】WebpackerでBootstrap、jQueryを導入方法 (https://qiita.com/YutoYasunaga/items/9a7eaa0a4ca898535912)
ruby:Gemfile
gem "cocoon"
以下のファイルをダウンロードして、app/javascript/src/に保存する。
https://github.com/nathanvda/cocoon/blob/master/app/assets/javascripts/cocoon.js
javascript:app/javascript/packs/application.js
require("../src/cocoon");
Updated by Yuto at 2022-01-20 23:55
【Ruby on Rails】Hướng dẫn làm chức năng sort với jquery-ui sortable
Cài đặt jQuery và jQuery-ui
yarn add popper.js jquery jquery-ui
```javascript:config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// Add
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
// Add
module.exports =...
Updated by Yuto at 2021-06-18 17:19