Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to use custom jQuery in Rails 6

Joan Gabun asked in Rails

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?

Reply

Hey I am also struggling with the same. Can you help me. I am trying to use Jquery UI. I was able to use jquery but not jquery UI.

Reply
Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,140+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.