Adding Page Specific JS to Rails Application
Tags: railsapplication, react, webdev, paloma
Published: 2019-06-13 09:26:05

---
title: Adding Page Specific JS to Rails Application
published: True
description: Rails 'Paloma' gem is a very beautiful library through you can load the JS as per the page and its action. Its setup is less time taking on the other hand the performances is very high.
tags: RailsApplication, ReactJs, Webdev, paloma
---

![Adding Page Specific JS to Rails Application](https://www.botreetechnologies.com/blog/wp-content/uploads/2019/06/Adding-Page-Specific-JS-to-Rails-Application.png)

In [Rails application](https://www.botreetechnologies.com/ruby-on-rails-development) you can manage page specific JS very easily with the help of Paloma [gem](https://www.botreetechnologies.com/blog/pagy-a-new-pagination-gem-in-the-realm-of-rails-world). Paloma gem is a logical way of managing Rails JavaScript files.

Requirements to use Paloma gem

- jQuery 1.7 or higher
- Rails 3.1 or higher

Paloma is a very beautiful library through you can load the JS as per the page and its action. Its setup is less time taking on the other hand the performances is very high.

##Pros of Paloma

- You can organize the JavaScript files as per the controller just like views folder structure of Rails.
- You can add JavaScript file per controller’s action.
- You can also choose the JavaScript code which you want to run per page & its action.
- [Ruby on Rails Development](https://www.botreetechnologies.com/blog/ruby-on-rails-development-obstacles-opportunities) variables are easily available on your JavaScript files.

###How to Install Paloma

**1. Add the gem to gemfile**

Without bundler

*sudo gem install paloma*

With bundler, add this to your Gemfile

*gem 'paloma'*

**2. Require Paloma in your application.js file**

*//= require paloma*

###Read Also - [Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes](https://www.botreetechnologies.com/blog/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes)

**3. Add the Paloma hook to your layout file**

{% gist https://gist.github.com/MittalPatel-BTC/d3fa2398ac7f34e77a27efb8a083df22 %}

In the current application, I am using application layout so I am adding Paloma’s hook (**insert_paloma_hook**) to **application.html.erb** file.

**Insert_paloma_hook** is responsible for connecting your Ruby code to your JavaScript code.

**4. Start Paloma to initialize the appropriate controller and execute a certain action.**

Create new JS file **initializer.js** under **app/assets/javascripts** folder add the below code in that file. You need to add the code inside the **document.ready**.

This is optional you can add the below code in the application.js file as well it totally depends on you.

{% gist https://gist.github.com/MittalPatel-BTC/01763ce1082edf897eeab28b2bc7e50f %}

After this, you need to require the **initializer.js** file to your **application.js** file after the Paloma

**Application.js**

{% gist https://gist.github.com/MittalPatel-BTC/4bd652c00efb72781790cd218079c49b %}

Now you are all set and ready to go with Paloma.

Let's talk about how it works with Rails controller and its action.

**Controllers**

Paloma controllers are javascript classes which were mapped with your Rails controller. Basically, Paloma and Rails controllers both will share the same name.

It is accessed, using **Paloma.controller** method if exist.

{% gist https://gist.github.com/MittalPatel-BTC/3113a73f8362934a948468d338a21725 %}

**Actions**

To handle specific actions of your Rails controller, you need to add methods to your Paloma controller's prototype.

{% gist https://gist.github.com/MittalPatel-BTC/f8350e2a0d702db95ea58dd4b5942d52 %}

You can also add the Paloma for the namespaced controller

**Controller**

{% gist https://gist.github.com/MittalPatel-BTC/5a6d86cf59d859ffce8d4bb1268efb68 %}

**JS file**

{% gist https://gist.github.com/MittalPatel-BTC/eeae9a81ed40b0c448a1fd39a63f5561 %}

**Let’s starts with an example**

Currently, I am having one simple controller named clients controller, I need to load the JS code only for the index action of the client so when the client index action is fire at that time that specific JS is load.

First of all, create client index action js file under the app/assets/javascript

![JS file](https://www.botreetechnologies.com/blog/wp-content/uploads/2019/06/JS-file-2.png)

I have created a **page_specific** folder under the **app/assets/javascript** folder. Here you can give any name to your folder or JS file because it basically works on the **Paloma.controller** and **ControllerName.prototype.ActionName** which are defined in the JS file.

**app/assets/javascripts/application.js**

{% gist https://gist.github.com/MittalPatel-BTC/73f2dfa184c4488cf8167112f4455d59 %}

**Note:** Keep in mind that you need to require your specific JS to application.js file for making it available for the controller or its action when any specific page is load.

**app/controllers/clients_controller.rb**

![Client Controller](https://www.botreetechnologies.com/blog/wp-content/uploads/2019/06/client-controller.png)

**app/assets/javascripts/page_specific/client/listing.js**

![Client Controller 2](https://www.botreetechnologies.com/blog/wp-content/uploads/2019/06/client-controller2.png)

So whenever I hit the '[http://localhost:3000/clients](http://localhost:3000/clients)' URL in the browser it will give me an alert message says ‘This is the JS code for clients index action’

But this alert is only displayed in the client's index action. In the other pages, it will not load.

###Home Page

**Client Index Page**

![Client Index Page](https://www.botreetechnologies.com/blog/wp-content/uploads/2019/06/Client-Index-Page.png)

You can also define the multiple actions in single Js file

Suppose you have a **client.js** file under **app/assets/javascripts/page_specific** folder

In **clinet.js** file, you can define multiple actions in that single file like,

{% gist https://gist.github.com/MittalPatel-BTC/43f817c6f7d3328008bfd77374643640 %}

So this depends on you how you want to make your JS folder structure and how you want to use it into your code.

This is how you can load the page specific JS to your [application](http://www.rordevelopmentindia.com/the-top-platforms-to-power-a-ruby-on-rails-web-application/) as per your requirements and make your application run faster than the usual. Reach out to learn more about the [expert software development companies in NYC](https://www.botreetechnologies.com/usa/web-development-company-new-york) for the various ways to improve or build the quality of projects and across your company.