Rails way of AJAX with remote: true

Magic of AJAX in Rails way

AJAX which is an abbreviation for Asynchronous JavaScript And XML through which web application can send or retrieve data asynchronously (in the background) for client/frontend side without interfering with the display and behaviour of the loaded web-page. So there can be a traditional way to use AJAX operation or their is a handy tool if you are using framework like Rails.

Workflow for AJAX operation

There are many use cases for using Rails way of AJAX with remote:true for different scenarios, but broadly it can be classified as below,

• AJAX with remote:true for button/link
• AJAX with remote:true for form

AJAX with remote:true for button/link

So let’s begin with the view page (html.erb) where the AJAX request plan needs to be plotted which might seem something like below,

index.html.erb
<a href=”<%= some_randoms_path %>”>Button/Link</a>
OR
<%= link_to “Button/Link”, some_randoms_path %>

I’m considering the scenario where on click of <a> tag will retrieve some data from index method of SomeRandomsController which will validate/process information and give out some response without reloading or interfering display of the loaded web-page. For doing such an operation we simply need to add ‘remote: true’ or ‘:remote => true’ to the link as below,

index.html.erb
<a href=”<%= some_randoms_path %>” id=‘random_id’ data-remote=”true”>Button/Link</a>
OR
<%= link_to “Button/Link”, some_randoms_path, id: ‘random_id’, remote: true %>

Now there is no need to write any javascript code to send any request (AJAX request) to any path as “remote: true” will handle it.

Note 1 : Let’s say, I have a requirement of passing any parameter(s) along with the request, which can be done by passing it into the params as,

<%= link_to “Button/Link”, some_randoms_path(attr1_param_name1: data1, attr2_param_name2: data2), id: ‘random_id’, remote: true %>

Note 2 : What if you explicitly want to specify the request format? So if the request sent is of format ‘json’ (to use it to render the response in json or for some other purpose), it can be done by specifying it along with the link path as,some_randoms_path(format: :json)

In the controller end, the request can be handled as below,

some_randoms_controller.rb
def index
 # your code/logic goes here
 return render json: { random_param_name: “Hello there!”}
end

Now we have sent the request to controller, done with some operation and returning some response to the view. At the view/frontend side we will need to apply/display the response coming from the backend which can be done by using javascript as below,

some_randoms.js
$(document).on(‘ajax:complete’, ‘#random_id’, function(event, data, status, xhr) {
  // response will come underneath of ‘data’ variable
  var response = data.random_param_name;
  alert(“Response is => ” + response)
});

And that’s it. You can add some validation by adding “status” to the response and some error handling techniques to display if response gets failed.

AJAX with remote:true for form

Similar to the AJAX with remote: true for link, it can also be used for various forms which can be given as below,

some_random.html.erb
<%= form_for(@random_variable, html: {id: “random_id”}, remote: true) do |form| %>
  //form code will go here
<% end %>

Now there is no need to write any javascript code to send any request (AJAX request) to any path as “remote: true” will handle it.

Note 1 : What if there is a requirement for change in AJAX request type or path for the form? It can be done as,

<%= form_for(@random_variable, url: other_random_path, method: :patch, html: {id: “random_id”}, remote: true) %>

Note 2 : What if you explicitly want to specify the request format? So If the request sent is of format json to use it to render the response in json or for some other purpose, it can be done by specifying it along with the url path as , some_randoms_path(format: :json)

In the controller end, the request can be handled as below,

some_randoms_controller.rb
def create
  # your code/ logic goes here
  return render json: { random_param_name: “Event created successfully!”}
end

Now we have sent the request to controller, done some operation and returning some response to the view. At the view/frontend side we will need to apply/display the response coming from the backend which can be done by using javascript as below,

some_randoms.js
$(document).on(‘ajax:complete’, ‘#random_id’, function(event, data, status, xhr) {
  //response will come underneath of ‘data’ variable
  var response = data.random_param_name;
  alert(“Response is => ” + response)
});

And that’s it. You can add some validation by adding “status” to the response and some error handling techniques to display if response gets failed.