Tag: jQuery
5 articles

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() // 自分の場合ではこれを呼ばないと動きません。 $('.select2').select2(); ...
Created by Yuto at 2022-01-26 19:57

【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

【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