Using jQuery with Rails 5.1

In this article, we will see how to get the Task management Rails 5 App we created in Using AJAX and jQuery in Rails 5 Apps to work with Rails 5.1 Create a new Rails 5.1 project with webpack.

rails new jqj --webpack

Install yarn on Mac:

brew install yarn

If you already have an older version installed, you will get:

Error: yarn 0.21.3 is already installed
To upgrade to 0.24.4, run `brew upgrade yarn`

You can upgrade it:

brew upgrade yarn

Add jQuery to Rails project, run the command from Rails home directory:

yarn add jquery

The yarn.lock file looks like this:

# yarn lockfile v1
  version "3.2.1"
  resolved ""
  ... more stuff not shown here

Creating the model, controller and migration is same as the tutorial for Rails 5. The task partial uses form_with:

<%= form_with model: task do |f| %>
  <%= f.check_box :complete %>
  <%= f.submit "Update" %>
  <%= f.label :complete, %>
  <%= link_to "(remove)", task, method: :delete, data: {confirm: "Are you sure?"} %>
<% end %>

The form partial uses form_with:

<%= form_with @task do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

This will give:

wrong number of arguments (given 1, expected 0)

when you run the app.

Change the form partial to provide the key-value:

<%= form_with model: @task do |f| %>

Reload the home page.

Ajaxify a Rails 5.1 App

If you create a new task, you will see:

Uncaught ReferenceError: $ is not defined

in the developer console.


//= jquery

in application.js. It will look like:

//= require rails-ujs
//= require turbolinks
//= jquery  
//= require_tree .

You will still get:

Uncaught ReferenceError: $ is not defined

Install jQuery using yarn:

$rake yarn:install

If you don't have nodejs installed, you will get the error:

env: node: No such file or directory

Check the node version:

node -v
-bash: node: command not found

Uninstall brew installed node.

brew uninstall node
Error: Refusing to uninstall /usr/local/Cellar/node/7.10.0
because it is required by yarn 0.21.3, yarn 0.24.4, which are currently installed.
You can override this and force removal with:
  brew uninstall --ignore-dependencies node

Follow the instructions:

brew uninstall --ignore-dependencies node  
brew uninstall --force node

Download node and install it. Now:

node -v

will display the installed version. You can now use yarn rake task:

rake yarn:install
yarn install v0.24.4
[1/4]   Resolving packages...
success Already up-to-date.
Done in 0.17s.

After you add AJAX to your Rails app, you might see the error:

couldn't find file 'jquery' with type 'application/javascript' 

Add jquery-rails gem to Gemfile and run bundle.

gem 'jquery-rails'

If you view the source, you will see the jquery.js file:

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>

You will now be able to use jQuery with Rails 5.1. If you click on the jquery.js file, you will by default jQuery Rails gem uses jQuery 1.x. To use jQuery 2, you must require jquery2 and for jQuery 3, you must require jquery3 in application.js. You can download the sample project from jqj.


Rails 5.1 Adopts Yarn Webpack and the JS Ecosystem
jQuery Rails Gem

Related Articles

Watch this Article as Screencast

You can watch this as a screencast Using jQuery with Rails 5.1

Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.