How to use custom jQuery in Rails 6

Question

I've been thinking about this for a couple of days already.

For some reason my semantic-ui jQuery doesn't work.

So here's what I did.

On my webpack/environment.js:

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

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

module.exports = environment

I added a custom.js file with the following codes under app/javascripts/packs:

$(document).on('turbolinks:load', function(){
    $('.ui.dropdown').dropdown();
})

And then inside of my application.js w/c is under app/javascripts/packs I have the ff:

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

require("packs/custom")

On chrome console here's what I see:

Uncaught TypeError: $(...).dropdown is not a function
    at HTMLDocument.<anonymous> (custom.js:3)
    at HTMLDocument.dispatch (jquery.js:4588)
    at HTMLDocument.elemData.handle (jquery.js:4408)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

I thought I did it right but for some reason this solution did not work at all. Any idea what am I doing wrong?

I would guess that the jQuery plugin that supplies the dropdown method has not been initialized at the time you call $('.ui.dropdown').dropdown(). — Les Nightingill
– Les Nightingill, Commented Oct 15, 2019 at 3:08

fool-dev · Accepted Answer · 2019-12-07 10:54:07Z

5

Look my /confog/webpack/environment.js file like below:

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

And /app/javascript/packs/application.js

require("jquery")
require("bootstrap")
require("packs/custom") // Here is my custom jQuery file like packs/custom.js

and in the /packs/custom.js look like for jQuery preloader

// Preloader JS
jQuery(window).on('load', function () {
    $('.preloader').fadeOut();
});

and exactly this way, custom jQuery is working nicely.

My project based on bootstrap 4 so I run this command for installing dependencies

yarn add bootstrap jquery popper.js

I think it will help.

Thanks

edited Dec 7, 2019 at 10:54

answered Dec 7, 2019 at 9:12

fool-dev

7,7759 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vidur punj · Accepted Answer · 2020-05-15 08:42:43Z

4

yarn add jquery

in packs/application.js

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

answered May 15, 2020 at 8:42

vidur punj

6,0295 gold badges53 silver badges73 bronze badges

Comments

shubham · Accepted Answer · 2020-02-26 06:30:33Z

0

On my webpack/environment.js:

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

And /app/javascript/packs/application.js

require("jquery")              //add this in application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

run this command for installing dependencies

  "yarn add jquery"

answered Feb 26, 2020 at 6:30

shubham

412 bronze badges

Collectives™ on Stack Overflow

How to use custom jQuery in Rails 6

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related