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 81,149+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.