How to Install jQuery and jQuery-UI in Rails 7 using importmap without node.js

There is no doubt that jQuery is the most popular lightweight JavaScript Libraries and as we all know that the latest version of Ruby on Rails has some extraordinary features and exciting updates. Definitely, that will simplify our web development process.

For example importmaps. Importmaps is a new feature that we can find from Rails 7+ as a built-in feature that allows us to load third-party javascript libraries without using Webpack and Node.js.

In my previous article, I tried to explain how we can add bootstrap 5 and fontawesome to our Rails 7 application using importmaps. Today, I'm trying to explain how we can add jQuery and jQuery-UI in Rails 7 application using importmap.

First, you have to create a new Rails 7 application. Rails 7+ will be automatically added importmap as the default package manager. You don't need to do anything to add importmap. Just simply run this command to create a new app with the name my-rails-app.

rails new my-rails-app        

Then you can follow these steps to add jQuery and jQuery-UI to your newly created Rails 7 application.

1. Create a home controller using this rails command:

rails g controller home index        

Set home as a root path: my-rails-app/config/routes.rb

root "home#index"        

Create a stimulus.js controller for our home controller. To create it run the command:

rails g stimulus home        

Connect between the home controller and the stimulus home controller. To connect these controllers open app\views\home\index.html.erb and add a div. Connect this div with the stimulus home controller using the html data-controller attribute.

<div data-controller="home">

  <h1> This is home page</h1>
 
</div>        

Open the stimulus home_controller.js file app\javascript\controllers\home_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="home"
export default class extends Controller {
  connect() {
    console.log("home controller has been connected"); 
  }
}        

Now run the rails server you will see the running app on http://127.0.0.1:3000 and if you inspect it you will see a console message from the home_controller.js file.

2. Add jQuery and jQuery-UI

Step 01:- Open the Gemfile and add two gem

# Use jquery as the JavaScript librar
gem 'jquery-rails'

# Use jquery-ui for pretty UI
gem 'jquery-ui-rails'

# Use Sass to process CSS
gem "sassc-rails"        

Step 02:- Rename the app\assets\stylesheets\application.css file to application.scss and add this line to load jQuery-UI CSS to our application.

app\assets\stylesheets\application.scss

@import "jquery-ui.css";        

Step 03: Create a new js file called jquery_ui.js in app/javascript folder and add this line of code to load jQuery-ui.js in our application.

app\javascript\jquery_ui.js

//= require jquery-ui        

Step 04: Now add jQuery and jQuery-UI in the application.js file.

app\javascript\application.js

import "jquery"
import "jquery_ujs"
import "./jquery_ui"        

Step 05: Open config\initializers\assets.rb and add this line to precompile jQuery and jQuery-UI

Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js jquery-ui.min.js )        

Step 06: Open config\importmap.rb and these lines to import jQuery and jQuery-UI

pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "jquery-ui", to: "jquery-ui.min.js", preload: true        

Run the command

bundle install        

Step 07: Now we are ready to use jQuery and jQuery-UI in our application.

open app\views\home\index.html.erb again and add an HTML input field and an HTML button.

<div data-controller="home">

  <h1> This is home page </h1>
  
  <h6> Pick date using jQuery Datepicker </h6>
  
  <p>Date: <input type="text" id="datepicker"></p>
  
  <br>
  <hr>
  
  <h6> JQuery Draggable Element </h6>
  
  <div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
  </div>
  
  <br>
  <hr>
  
    <h6> Click Event using JQuery </h6>
    
    <button id="btn-click"> Click Me </button>
    
  </div>        

Step 08: Open app\javascript\controllers\home_controller.js and replace these codes to add functionality for datepicker, draggable, and click event.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="home"
export default class extends Controller {
  connect() {
    console.log("home controller has been connected");

    $( "#datepicker" ).datepicker();

    var initial_val = 0;
    $("#btn-click").click(function (e) { 
      e.preventDefault();
      var date_value = $("#datepicker").val();
      alert(`button has been clicked ${initial_val} and date ${date_value} `);
      initial_val+= 1;
    });

      $( function() {
    $( "#draggable" ).draggable();
  } );

  }
}        

Step 09: Stop the server, run the server again, and you will see the running app on http://127.0.0.1:3000 with a date picker, and draggable element. Once they pick a date and click the 'Click me' button, you will see an alert box appearing.

Bonus: You can also check whether jQuery-UI on your website is added or not in the browser console. To check it after running your server, inspect the home page and in the console write.

console.log($.ui)
or 
console.log($.ui.version)        

You can also check jQuery using console.log()

console.log($)
or
console.log(jQuery)
or
console.log(jQuery().jquery)