Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to use jQuery & jQueryUI with Esbuild Discussion

If we're not using jQueryUI or any library that depends on jQuery, then are these lines enough by themselves?
window.jQuery = jquery;
window.$ = jquery;

Reply

Should do. You have to make sure to import jquery first after the yarn install

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

I have done all of the above. But, jquery is not available in my html.erb files inside the tag.<br> e.g. say inside app/views/home/index.html.erb</p> <script> $( () => { console.log("Hello World!"); });

I get the error:
Uncaught ReferenceError: $ is not defined

Reply

Two things to check.

1) If you're sprinkling snippets of jQuery in your views, you'll want to look at application.html.erb and make sure the javascript_include_tag does not have "defer: true". So just:

javascript_include_tag "application", "data-turbo-track": "reload"

2) If you are using jQuery in your Stimulus controllers, make sure to import the jQuery before you import the controllers. I had to do:

import "./src/jquery"
import "./controllers"

Reply

Thanks.
This did not work, instead produced runtime error.
I will be using jquery within stimulus controller instead, which worked for me.

Reply

Also, there are errors like: ActionController::RoutingError (No route matches [GET] "/images/ui-icons_555555_256x240.png")
I have copied these icons from the downloaded jquery-ui-1.13.0.custom zip file into the app/assets/images folder and inside app/assets/config/manifests added //= link_tree ../images

Reply

I really admire this episode, I cannot imagine how much effort did you put to find these solution to import jQuery and jQuery UI in to Rails. But since when it's become this complicated just trying to import jQuery in our web application? :'(

Reply

I have the same thought. Everything was easier before javascript took our world

Reply

I'm trying to use the same approach for select2, but doesn't work for me, I have this error in the browser console.

admin-2ddc00f8a5f543e218a75bb46242ae32f3232f28f249c68cd24f4017022e3cbb.js:19594

   Uncaught TypeError: $(...).select2 is not a function
Reply

Did you eventually figure out a solution for this? I'm having the same issue with select2.

Reply

Try import("select2").then(m => m.default());

Reply

Finally we moved to choices-js, but in a next project I'm going to try that approach, thanks :)

Reply

This worked for me with select2 :

import select2 from "select2"

window.select2 = select2();

Reply

Great! thanks!

Reply

Great, It worked for me as well

Reply

Great tip! Thanks!!

Reply

For people coming from Rails 7, if you have already followed the video and installed jquery, $ is available in developer console; however, the view still raises "Uncaught ReferenceError: $ is not defined".
Try to load the jquery in separate file without "type: module"

    = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
    = javascript_include_tag "jquery", "data-turbo-track": "reload"
Reply
Join the discussion
Create an account Log in

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

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

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