DEV Community

loading...

Adding Page Specific JS to Rails Application

botreetech profile image BoTree Technologies Updated on ・4 min read

Adding Page Specific JS to Rails Application

In Rails application you can manage page specific JS very easily with the help of Paloma gem. 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 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

3. Add the Paloma hook to your layout file

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.

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

Application.js

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.

Actions

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

You can also add the Paloma for the namespaced controller

Controller

JS file

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

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

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

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

Client Controller 2

So whenever I hit the '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

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,

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 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 for the various ways to improve or build the quality of projects and across your company.

Discussion

pic
Editor guide