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:

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
jquery@^3.2.1:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
  ... 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, task.name %>
  <%= 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.

Add:

//= 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
v6.10.3

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.

References

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